事件侦听器从同一指令中多次激发

Event listeners fired multiple times from same directive

本文关键字：指令 侦听器 事件      更新时间：2023-09-26

在我的应用程序中，我使用了一个带有窗口大小调整事件侦听器的自定义指令：

link: function(scope, elem, attrs) {
    angular.element($window).bind('resize', function() {
        // viewId is a unique reference to the view in which the directive lives
        console.log(scope.viewId);
    });
}

该指令在我的每个视图中插入1次或多次。

令我困惑的是，为什么该功能不仅对活动视图执行，而且对非活动视图执行。一旦我访问了多个视图，就会发生这种情况。

更让我困惑的是，为什么在我多次访问同一视图后，从同一视图多次调用该函数。

在我看来，旧的指令作用域并没有被破坏，而是保持了活力，并且在旧的作用域之上创建了一个新的作用域。

我能做些什么来防止这种行为吗？

以下是基于Renan Lopes Ferreira提供的答案的工作解决方案的代码片段（我使用LoDash_.debonce来防止函数被调用过频繁）：

windowResize = _.debounce(function () {
    // My logic
    $scope.$apply();
}, 150);
// Attach debounced function to the window.resize event listener
angular.element($window).on('resize', windowResize);
// Remove the function when the directive is destroyed
$scope.$on('$destroy', function () {
    angular.element($window).off('resize', windowResize);
});

当指令被销毁时，您需要删除侦听器。类似于：

angular.element($window).on('resize', resize);
scope.$on('$destroy', function () {
  angular.element($window).off('resize', resize);
});
function resize(){
    ...
}

在指令中，为找到的具有相同名称angular的每个指令调用一次链接函数。

因此，如果您的视图中有两次指令，它将执行两次链接函数。

如果您只想运行一次函数，只需在"compile"函数中执行即可。

查看本教程，他很棒：http://www.sitepoint.com/practical-guide-angularjs-directives/

相关文章：