$watch不能在Angular Modal中工作

$watch not working inside Angular Modal

本文关键字：Modal 工作 Angular watch 不能      更新时间：2023-09-26

我试图在AngularJS Modal内的单选按钮上放一个$watch。但是，$watch不能在modal中对任何值进行更改。

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

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

预览

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

但是，如果你点击了主页面的单选按钮(即外部窗口)，$watch工作得很好，并抛出警告消息。

有人有解决这个问题的方法吗?由于

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

在你的ng-model表达式中总是有一个"."

如果你的ng-model表达式中没有点，它将在当前作用域中具有ng-model的元素所在的位置创建一个属性。这通常不是你所期望的作用域，因为许多指令都创建了子作用域，包括UI Bootstrap中的modal指令。

通过包含一个点，你正在引用一个对象，它将在原型(作用域)链上查找，然后访问或创建上的属性，这将在正确的作用域上。

因此，在您的示例中，如果您更改代码以便在控制器中创建$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，所以它现在可以工作了

相关文章：