指令聽取控制器變量的變化

Question

剛開始使用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，但這似乎不起作用。 對此有任何幫助將非常感謝，謝謝！

Answer 1

我假設你使用的是不穩定的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中的事件通常不應該被使用。 你認為有更好的方法是正確的。 希望這會有所幫助。