5

刚开始使用 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，但这似乎不起作用。对此的任何帮助将不胜感激，谢谢！

4

1 回答 1

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 作为最后一个参数传递给 scope.$watch，它将监视相等而不是引用。

$watch(watchExpression, listener, objectEquality)

objectEquality (optional) boolean 比较对象是否相等而不是参考。

这里发生的事情是 DOM 元素上的 collection 属性指定了我们应该观察范围内的哪个属性。$watchCollection 函数回调将在作用域上的值发生变化的任何时候执行，因此我们可以安全地触发 renderFunc()。

Angular 中的事件真的不应该经常使用。你认为有更好的方法是对的。希望这会有所帮助。

于 2013-10-22T21:38:39.270 回答