刚开始使用AngularJS并尝试找出控制器中的变量发生变化时监听事件的最佳实践。我使用它的唯一方法是使用emit,如下所示。
例如:
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,但这似乎不起作用。对此有任何帮助将非常感谢,谢谢!
答案 0 :(得分:3)
我假设您使用的是不稳定的Angular,因为$ watchCollection只在不稳定的分支中。
$watchCollection(obj, listener)
Shallow监视对象的属性,并在任何属性发生更改时触发(对于数组,这意味着要观察数组项;对于对象映射,这意味着要观察属性)。如果检测到更改,则会触发侦听器回调。
'Angular'这样做的方法是在你的指令中观察一个属性。
<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,它将监视相等而不是引用。
$watch(watchExpression, listener, objectEquality)
objectEquality(可选)boolean 比较对象是否相等而不是参考。
这里发生的是DOM元素上的collection属性指定我们应该观察的范围内的哪个属性。 $ watchCollection函数回调将在范围内的值发生变化时执行,因此我们可以安全地触发renderFunc()。
Angular中的事件通常不应该被使用。你认为有更好的方法是正确的。希望这会有所帮助。