Question

我有一个图像库，每个图像都提取相关数据。我已经制定了一个指令，一旦它们在视野中就会延迟加载图像。它工作得很好，但是每个指令都在继续观察滚动事件，其中大约有200个指令，很多事件都被不必要地触发了。有没有办法删除指令，或禁用它？

app.directive('lazyLoadGallery', function(resourceService, $rootScope){
    return{
       link: function (scope, element, attrs) {
         var isLoaded = false;
         $('.issue-gallery').on('scroll', function(){
             console.log($rootScope.number);
             if((attrs.lazyLoadGallery/10) % 1 === 0 && !isLoaded) {
               if($(element).visible()){
                 isLoaded = true;
                 resourceService.issueListPages.list({number:$rootScope.number}).$promise.then(function(data){
                    $rootScope.issueList = $rootScope.issueList.concat(data.results);
                     $rootScope.number ++;
                     $(element).removeAttr('lazy-load-gallery');
                    });
               };
             }else{
                 $(element).removeAttr('lazy-load-gallery');
             }
         })

       }
    }
});

我的尝试是从DOM中删除该属性。即使它被删除，该指令仍然在观察滚动事件，并且好像它没有被移除一样。

Answer 1

我无法销毁父对象上的侦听器而不会消除所有指令的事件。我提出了一个名称间隔事件来清理听众。

app.directive('lazyLoadGallery', function(resourceService, $rootScope, $compile){
return{
   controller: function($scope, $element, $attrs) {
        var isLoaded = false;
        angular.element('.issue-gallery').on('scroll.'+ $scope.$id, function () {
            if (($attrs.lazyLoadGallery / 10) % 1 === 0 && !isLoaded) {
                if ($($element).visible()) {
                    isLoaded = true;
                    resourceService.issueListPages.list({number: $rootScope.number}).$promise.then(function (data) {
                        $rootScope.issueList = $rootScope.issueList.concat(data.results);
                        $rootScope.number++;
                        angular.element('.issue-gallery').off('scroll.'+ $scope.$id);
                    });
                }
                ;
            } else {
                angular.element('.issue-gallery').off('scroll.'+ $scope.$id);
            }
        })
   }
}
});

Answer 2

角度documentation表示$ on函数的返回是

返回function（）返回此注销函数监听器。

因此，在您的情况下，只需将其分配给变量，并在不再需要它时调用它。

var deregister = $scope.$on('something', function() {
    if (success) {
        deregister();
    }

});

Angular指令自行删除

2 个答案: