Question

我很难理解为什么我的指令中的代码即使在我更改状态之后也不会停止运行，并且我将限制指令的dom元素不再在可用视图中。在下面的代码示例中，如果我从主页开始，document.addEventListener函数将不会在鼠标按下时运行，这正是我所期望的。然后，当我得到our_purpose状态时，div的类别为＆＃34; test＆＃34;驻留，事件按预期触发。但是，当我导航回到home状态时，事件监听器仍然存在。

如何实现，以便我的test指令中的所有代码都可以删除，不再有效...有没有办法从指令重启所有内容，直到你在该视图中它不再存在？

这是我的工作代码的简化版本，但是当你处于另一个状态时，real指令中有很多功能会导致问题。

var app = angular.module('app', ['ui.router']);

app.directive("test", function() {
    return {
        scope: true,
        transclude: false,
        controller: 'OurPurposeCtrl',
        restrict:"C",
        link:function( scope, elem, attr) {
            function testThis() {
                console.log("still running the directive");
            }
            function init() {
               document.addEventListener( 'mousedown', testThis, false               );
            }
            init();

        }
    }
});

app.config(['$stateProvider','$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('home', {
                url: '/',
                controller: 'landing',
                templateUrl: 'views/landing.html'
            })

            .state('our_purpose', {
                controller: 'OurPurposeCtrl',
                url: '/our-purpose',
                templateUrl: 'views/our-purpose.html'

            })
    }
]);

Answer 1

您正在将侦听器附加到文档，它永远不会被破坏，因此侦听器不会

使用scope.$on('$destroy', function)

删除范围的destroy事件中的事件侦听器

app.directive("test", function($document) {
    return {
        scope: true,
        transclude: false,
        controller: 'OurPurposeCtrl',
        restrict:"C",
        link:function( scope, elem, attr) {
            function testThis() {
                console.log("still running the directive");
            }
            function init() {
               $document.bind( 'mousedown', testThis );
            }
            init();

            scope.$on('$destroy', function(){
               $document.unbind( 'mousedown', testThis );
               console.log('Mousedown listener should be gone');
            });

        }
    }
});

如何在Angular中更改状态时停止运行指令代码

1 个答案: