4

我正在試圖在AngularJS Modal內的一個單選按鈕上放一個$手錶。但是,$ watch不適用於任何值更改的模態。

如果我嘗試將單選按鈕放在模態之外,那麼$ watch完美無缺。

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

在上面plunkr,如果你點擊打開我的選擇上2個單選按鈕(我,你)$手錶不會激發,進而ü不能看到值警報。

但是,如果您在主頁面點擊單選按鈕(即外窗)$腕錶作品完美的罰款,並引發警報消息。

有沒有人有解決這個問題的方法?由於

回答

10

這是違反了非官方的金科玉律的症狀使用ng-model時:「」

始終有一個在NG-模型表達

如果你沒有在你的NG-模型表達一個點,它會在那裏與NG-模型的元素是點上創建當前範圍的屬性。這通常不會成爲您期望的範圍,因爲許多指令都會創建子範圍,包括UI Bootstrap中的模態指令。

通過包含一個點,引用一個將在原型(範圍)鏈上查找的對象,然後訪問或創建上的屬性,該屬性將在正確的範圍內。

因此,在你的例子,如果你讓你在你的控制器創建一個$scope.data屬性,並設置ng-model表達data.rdd改變你的代碼,你將能夠「看到」在控制器的變化並做出反應他們。

因此,控制器代碼的函數體的開頭爲:在您的HTML

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

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

而且你的單選按鈕應該是:

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

forked your Plunkr所以現在的作品。

+0

非常感謝!工作就像一個魅力:) – nomad

+0

我越使用其他框架(reactJS,flightJS,燼)越討厭Angular。這會讓你的工作效率非常高,直到你找到像這樣的東西...... – aemonge

+0

那麼如何讓父文檔與數據更改同步呢?當你在模式中切換收音機時,我希望能看到父母的改變。 – MrWiLofDoom