指令监听控制器变量变化

刚开始使用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

指令监听控制器变量变化

回答

相关问题