$ watch在Angular Modal中没有工作

Question

我想把一只$ watch放在AngularJS Modal里面的一个单选按钮上.但是,对于任何值更改,$ watch在模态内部都不起作用.

如果我尝试将单选按钮放在模态外,$ watch的效果非常好.

在上面的plunkr中,如果你单击打开我并选择上面的2个单选按钮(我,你)$ watch不会被触发,反过来你不能看到带有值的警报.

但是,如果您单击主页面中的单选按钮(即外部窗口),$ watch可以正常工作并抛出警报消息.

有没有人有解决这个问题的方法？谢谢

Answer 1

这是使用时违反非官方黄金法则的症状ng-model:

总是有一个"." 在您的ng模型表达式中

如果ng-model表达式中没有点,则它将在具有ng-model的元素的当前范围上创建一个属性.这通常不是您期望的范围,因为许多指令创建子范围,包括UI Bootstrap的模态指令.

通过包括一个点,你引用一个对象,这将是在原型(范围)链抬头,然后访问或创建一个特性是,这将是在正确的范围.

因此,在您的示例中,如果您更改代码以便$scope.data在控制器中创建属性并将ng-model表达式设置为data.rdd,则您将能够"看到"控制器中的更改并对其进行响应.

因此控制器代码函数体开始于:

  $scope.data = {
    rdd: 'me'
  };

  $scope.$watch('data.rdd', function(v, old){
    if(v!==undefined && v !== old)
      alert(v);
  });

您的HTML中的单选按钮应为:

        <input type="radio" ng-model="data.rdd" value="me">me
        <input type="radio" ng-model="data.rdd" value="you">you

我把你的Plunkr分叉,所以它现在可以工作了.