$ watch在Angular Modal中沒有工作

Question

我想把一只$ watch放在AngularJS Modal里面的一個單選按鈕上。 但是，對於任何值更改，$ watch在模態內部都不起作用。

如果我嘗試將單選按鈕放在模態外，$ watch的效果非常好。

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

在上面的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分叉，所以它現在可以工作了。