javascript - 在 ng-if 中设置监视元素

Question

假设我有以下观点:

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

在 Controller some 中设置:

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

如果输入位于带有 ng-if 的 div 中，则 watch 不起作用。

为什么？我能以某种方式让它发挥作用吗？

Answer 1

您必须在 Controller 中创建 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 对于 Angular 应用程序性能来说是一种不好的做法。

使用 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);
     };
   }
);