Question

这是我的完整代码：

<html ng-app="myApp">
<head>   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>  
</head>


<body >
 <div ng-controller="myController">                        
 <form name="myForm">
   <input ng-model="option" name="test">
   {{myForm.$dirty}}
   <button>Save</button>
 </form>
 </div>



 <script> 
 angular.module('myApp',[]).controller('myController',function($scope){

    $scope.option=2;
    console.log($scope.myForm);
    });

</script>
</body>
</html>

当{{myForm.$dirty}}有效时，console.log($scope.myForm)会返回未定义！同时，如果我console.log($scope)我可以看到myForm作为其中一个属性!!!!为了不生气，有人可以解释这个悖论吗？

Answer 1

我不喜欢这个解决方案，但它有效。在您要访问表单的代码周围加上$ timeout。 $ timeout类强制代码等待表单完全呈现。（不要忘记注入$ timeout。）

angular.module('myApp',[]).controller('myController',function($scope, $timeout){

$scope.option=2;
$timeout(function() {
    console.log($scope.myForm);
}); //Note that you don't need it to actually wait for any amount of time

如果你使用console.log（$ scope）而不是在console.log（$ scope.myForm）时看到表单的原因是因为控制台在展开时会评估$ scope。到那时，表格已经呈现并附加到范围。

Answer 2

你有没有试过在表格上放一个观察者？我猜测在定义控制器代码时，表单尚未定义。

$scope.$watch('myForm', function(form) {
  if(form) {
    //check if form is defined
  }
});

控制器内的访问表单

2 个答案: