javascript - AngularJS Controller 在模板加载之前执行

Question

我有一个电子邮件验证链接，看起来像这样

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

我的输入字段是这样的。

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

此代码应在模板加载时运行，以将参数插入文本字段

 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;
 }

但是 Controller 似乎在模板实际加载之前执行此操作，因为页面加载时输入字段为空。任何有关如何正确执行此操作的信息都会很棒，我尝试在谷歌上搜索“ Controller 加载后加载模板”之类的内容，但没有找到任何内容。谢谢。

编辑:

我尝试将 ng-init="loadCode()" 添加到输入字段，但仍然不起作用。

 $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);
      }
 }

Answer 1

您不需要通过 angularjs 中的 manupulate dom 来更改输入值。 Angular 已经拥有很多强大的机制来帮助您减少开发工作。

就您而言，只需将代码更改为:

.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;
     }

});

这是一个针对 Angular 较新版本的有用答案:“Thinking in AngularJS” if I have a jQuery background?

Here is ngModel Document.

享受它:)