AngularJS Controller executing before template loads

Question

I have a email verification link, which looks something like

 .when('/user/register/verify/:verify_code?', {
      controller: 'AngularRegisterVerifyPage',
      templateUrl: '/user/register/verify'
 })

And my input field is like this.

input(ng-model="formData.verify_code", name="verify_code", type='text', class='form-control', placeholder='Verification Code', id="verify_code")

And this code should run when the template loads to insert the Parameter into the text field

 document.getElementById('verify_code').value = "Test"; // Debugging Test Code
 $scope.formSubmitted = false;
 if ($routeParams.hasOwnProperty("verify_code")) {
      document.getElementById('verify_code').value = $routeParams.verify_code;
 }

But it would appear that the controller executes this before the template actually loads because when the page loads the input field is empty. Any information on how to do this properly would be great, I tried googling things like "Load Template after Controller loads" but haven't found anything. Thanks.

Edit:

I tried adding ng-init="loadCode()" to the input field, but it still doesn't work.

 $scope.loadCode = function() {
      if ($routeParams.hasOwnProperty("verify_code")) {
           console.log('Called');
           document.getElementById('verify_code').value = $routeParams.verify_code;
           console.log($routeParams.verify_code);
           console.log(document.getElementById('verify_code').value);
      }
 }

Why are you using `document.getElementById` instead of just retrieving the value the Angular way as `$scope.formdata.verify_code`? You should only set the value by changing the model as well. — Blazemonger, Nov 05 '14 at 03:02
@Blazemonger Like I said, I'm new to Angular I wasn't aware I could set the value like that. Regardless it still doesn't work. — Datsik, Nov 05 '14 at 03:03
Put together a working example at http://plnkr.co if you can. I strongly suspect the real problem is that you're trying to manipulate the DOM instead of the model like Angular expects you to. — Blazemonger, Nov 05 '14 at 03:04
@Chandermani If he use ng-route to change ng-view template&controller. There is not have ng-controller="AngularRegisterVerifyPage". And according to his description, controller is working fine. So just need to change $scope.formData.verify_code, it will change input filed value. — Tyler.z.yang, Nov 05 '14 at 03:16

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

You don't need to change input value by manupulate dom in angularjs. Angular already has a lot of tremendous mechanism to help you reduce your development work.

In your case, you just change your code into this:

.controller('AngularRegisterVerifyPage', function($scope, $routeParams){
     $scope.formData = {};
     if ($routeParams.hasOwnProperty("verify_code")) {
         //You change your value in your model, angular will render this to your html(view)
         $scope.formData.verify_code = $routeParams.verify_code;
     }

});

Here is a useful answer for angular newer: “Thinking in AngularJS” if I have a jQuery background?

Here is ngModel Document.

Enjoy it : )

edited May 23 '17 at 11:57

Community

1
1

answered Nov 05 '14 at 03:20

Tyler.z.yang

2,402
1
18
31

I get this error: `TypeError: Cannot set property 'verify_code' of undefined` – Datsik Nov 05 '14 at 03:27
Then you need to initialize `$scope.formData` to an empty object at the top of your controller. – Blazemonger Nov 05 '14 at 03:30
Sorry, my fault. Change your code into $scope.formData = {}; if ($routeParams.hasOwnProperty("verify_code")) { $scope.formData.verify_code = $routeParams.verify_code; } – Tyler.z.yang Nov 05 '14 at 03:31
@Tyler.z.yang Thank you this works. Angular is new to me, right now I got everything crammed into main.js I got to learn about how to organize it better. Thanks. – Datsik Nov 05 '14 at 03:32
@Datsik You are welcome. [This answer is for folder structure.](http://stackoverflow.com/questions/18542353/angularjs-folder-structure) I think this is helpful. Happy coding. – Tyler.z.yang Nov 05 '14 at 03:36

AngularJS Controller executing before template loads

1 Answers1