AngularJS：指令監視屬性表達式

Question

我想要一個指令來觀察屬性表達式的結果，例如：

<div scroll-if="test === selectedTest"></div>

這樣它就可以對變化作出反應並滾動到特定元素。 我似乎在努力尋找如何觀察這種表達方式的變化。

Answer 1

使用$watch ：

app.directive('scrollIf', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attributes) {

      var actionScroll = function(newVal, oldVal) {
        if(newVal!==oldVal) {
          console.log("scrolling");
        }
      }

      scope.$watch(attributes.scrollIf, actionScroll);
    }
  }
});

$watch可以評估屬性表達式scroll-if ，如果此表達式為true，則actionScroll偵聽器將運行。

有必要添加條件newVal!==oldVal ，因為actionScroll總是第一次運行。 這在$ watch文檔中有解釋