指令監聽控制器變量變化

剛開始使用AngularJS並試圖找出在控制器內的變量發生變化時監聽事件的最佳做法。我已經得到它的唯一方法是發射，如下所示。指令監聽控制器變量變化

例如：

var app = angular.module("sampleApp", []) 

app.controller("AppCtrl", function($scope){ 
    $scope.elements = [ 
    { 
     name: "test" 
    } 
    ] 

    $scope.addElement = function() { 
     $scope.elements.push({ 
      name: "test" + $scope.elements.length 
     }) 
     $scope.$emit('elementsChanged', $scope.elements); 
    } 
}) 

app.directive('render', function() { 
    var renderFunc = function() { 
     console.log("model updated"); 
    } 
    return { 
     restrict: 'E', 
     link: function(scope, element, attrs, ngModel) { 
     scope.$on('elementsChanged', function(event, args) { 
       renderFunc(); 
     }) 
     } 
    } 
})

這似乎有點靠不住的，而且我覺得我的工作對角點。我試圖在模型上使用$ watch，但這似乎不起作用。任何幫助，將非常感激，謝謝！

來源

2013-10-22 dardo

您的目標是通知其他控制器該變量已更改？要麼？ – KayakDave

只是在這一點指示，只是注意到我的標題有一個奇怪的錯字，哈哈。 – dardo

檢查了這一點，看看它是你在找什麼：http://stackoverflow.com/questions/17138868/how-to-trigger-a-directive-when-updating-a-model-in-angularjs – KayakDave

我打算假設您使用的是不穩定的Angular，因爲$ watchCollection只在不穩定的分支中。

$watchCollection(obj, listener)

淺手錶的對象並且每當任何屬性的改變火災的性能（陣列，這意味着看着數組項;對於對象映射，這意味着觀看屬性）。如果檢測到更改，則會觸發偵聽器回調。

這樣做的「角度」方法是觀察指令中的屬性。

<render collection='elements'></render>

你的指令

app.directive('render', function() { 
    var renderFunc = function() { 
     console.log("model updated"); 
    } 
    return { 
     restrict: 'E', 
     link: function(scope, element, attrs) { 
     scope.$watchCollection(attrs.collection, function(val) { 
      renderFunc(); 
     }); 
     } 
    } 
})

如果你在穩定的角度這樣做，你可以作爲最後一個參數範圍。$表，將觀看的平等，而不是引用傳遞true。

$watch(watchExpression, listener, objectEquality)

objectEquality（可選）布爾平等而不是參考比較對象。

這裏發生了什麼是DOM元素上的集合屬性指定我們應該觀察的範圍內的哪個屬性。 $ watchCollection函數回調將在該值在該範圍內更改時執行，因此我們可以安全地觸發renderFunc（）。

Angular中的事件不應該經常使用。你認爲有更好的方法是對的。希望這有助於。

來源

2013-10-22 21:38:39 Adam

這正是我所期待的！我知道事情真的很不穩固。我其實並沒有使用不穩定的版本，所以最終只是作爲最後一個參數傳遞真實，並且它像一個魅力一樣工作。謝謝一堆！ – dardo

指令監聽控制器變量變化

回答

相關問題