javascript - $watch 在 Angular Modal 中不工作

Question

我正在尝试将 $watch 放在 AngularJS Modal 内的单选按钮上.然而，$watch 不能在模态内部为任何值变化工作。

如果我尝试将单选按钮放在模态之外，$watch 工作得很好。

http://plnkr.co/edit/q8t9qGJg57MMiQGop202?p=preview

在上面的 plunkr 中，如果你点击打开我并选择上面的 2 个单选按钮(我，你)$watch 不会被触发，你也看不到带有值的警报。

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

有人有解决此问题的方法吗？谢谢

Answer 1

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

Always have a "." in your ng-model expression

如果您的 ng-model 表达式中没有点，它将在带有 ng-model 的元素所在的位置的当前作用域上创建一个属性。这通常不是您期望的范围，因为许多指令创建子范围，包括来自 UI Bootstrap 的模态指令。

通过包含一个点，您将引用一个对象，该对象将在原型(prototype)(范围)链上查找，然后访问或创建that 上的属性，这将在正确的范围。

因此，在您的示例中，如果您更改代码以便在 Controller 中创建一个 $scope.data 属性，并将您的 ng-model 表达式设置为data.rdd，您将能够“看到” Controller 中的变化并做出响应。

因此 Controller 代码函数体开始于:

  $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

我forked your Plunkr所以它现在可以工作了。