Question

所有

我有一个名为scrolly的属性指令。该指令如下所示：

.directive('scrolly', function () {
return {
    restrict: 'A',
    scope: {
      scrollFunction: '&scrolly'
    },
    link: function (scope, element, attrs) {
        var raw = element[0];
        scope.$watch(element[0].children.length, function(){
          if(raw.clientHeight <= raw.scrollHeight){
            scope.scrollFunction();
          }
        });

        element.bind('scroll', function () {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.scrollFunction();
            }
        });
    }
};

}）

目标是执行无限滚动。滚动部分工作正常。无效的部分是scope.$watch部分。基本上，监视部分的目标是执行分页功能，直到元素变得可滚动，此时滚动绑定将接管。虽然我的指令的目的是分页，我不想挂断。根本问题是如何观察元素的属性。

Answer 1

scope.$watch(angular.bind(element, function(){
       return element.children.length;
    }), function(oldValue, newValue) {
    if(raw.clientHeight <= raw.scrollHeight){
        scope.scrollFunction();
    }
});

Answer 2

在$ watch中，您可以使用函数作为watch参数来监视事物的特定属性。

scope.$watch(function() {
  return element[0].children.length;
},
function() {
  // do your thang on change
})

观察属性指令元素下的子数

2 个答案: