AngularJS:指令监视属性表达式

时间:2015-03-28 01:21:17

标签: javascript angularjs angularjs-directive watch

我想要一个指令来观察属性表达式的结果,例如:

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

然后它可以对更改作出反应并滚动到特定元素。我似乎在努力寻找如何观察这种表达方式的变化。

1 个答案:

答案 0 :(得分:8)

使用$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 documentation

中有解释