在ng-if内的元素上设置监视

Question

假设我有以下观点:

<div ng-if='some === "something"'>
   <input type="text" ng-model="foo.Bar"/>
</div>

在控制器some中设置:

foo.controller('fooFoo',
   function fooFoo($scope) {
      $scope.some = "something";
      $scope.$watch('foo.Bar',function (nVal, oVal) { etc...});
   }
);

如果输入在div内,ng-if则watch不起作用.

为什么？我可以以某种方式使它工作？

Answer 1

您必须在控制器内创建 foo 的空对象。

foo.controller('fooFoo',
   function fooFoo($scope) {
      $scope.foo = {};
      $scope.some = "something";
      $scope.$watch('foo.Bar',function (nVal, oVal) { etc...});
   }
);

推荐：您可以使用ng-change而不是 $scope.$watch(); 因为 $watch 对于角度应用程序性能来说是一个不好的做法。

使用 ng-change (HTML)：

<div ng-if='some === "something"'>
   <input type="text" ng-model="foo.Bar" ng-change="onChange()"/>
</div>

JavaScript：

foo.controller('fooFoo',
   function fooFoo($scope) {
      $scope.some = "something";

      $scope.onChange = function(){
          console.log($scope.foo.Bar);
     };
   }
);