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，actionScroll 侦听器将运行如果此表达式为真。

有必要加上条件newVal!==oldVal，因为actionScroll总是运行第一次。 $watch documentation

中对此进行了解释

AngularJS : 指令监视属性表达式

AngularJS : directive watch attribute expression

javascript

watch

angularjs

angularjs-directive