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

如果输入位于包含ng-if的div内，则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);
     };
   }
);

Answer 2

在ng-change元素上使用input代替控制器中的$watch。

Answer 3

我认为问题在于 - 如果创建自己的范围。然后我们有fooFoo范围（父）和ng-if范围。

第一次（页面init）属性foo.Bar在两个作用域中都可用，并且由于继承而指向同一位置（fooFoo控制器中的foo.Bar属性）。但是在更改输入元素后（在ng-if作用域中），ng-if作用域中的foo.Bar指向其自己的作用域属性，因此fooFoo控制器中的foo.Bar不会被更改。

如果您使用控制器，我认为它将被解决。

类似的东西：

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

你是控制者：

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

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

3 个答案: