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
– Blazemonger, Commented Nov 5, 2014 at 3: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
– Datsik, Commented Nov 5, 2014 at 3:03
Put together a working example at 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
– Blazemonger, Commented Nov 5, 2014 at 3: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
– Tyler.z.yang, Commented Nov 5, 2014 at 3:16

Community · Accepted Answer · 2017-05-23 11:57:45Z

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, 2017 at 11:57

CommunityBot

11 silver badge

answered Nov 5, 2014 at 3:20

Tyler.z.yang

2,4601 gold badge21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Datsik Over a year ago

I get this error: TypeError: Cannot set property 'verify_code' of undefined

Blazemonger Over a year ago

Then you need to initialize $scope.formData to an empty object at the top of your controller.

Tyler.z.yang Over a year ago

Sorry, my fault. Change your code into $scope.formData = {}; if ($routeParams.hasOwnProperty("verify_code")) { $scope.formData.verify_code = $routeParams.verify_code; }

Datsik Over a year ago

@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.

Tyler.z.yang Over a year ago

@Datsik You are welcome. This answer is for folder structure. I think this is helpful. Happy coding.

Collectives™ on Stack Overflow

AngularJS Controller executing before template loads

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related