Question

我通过指令将图库放入页面。画廊使用javascript在图像之间来回解析（我计划使用css过渡来旋转一系列类）。

我希望执行setInterval函数，但仅当指令在页面上时（也就是说只有在调用某个路径时）。但是，即使在命中新路径并且在我的页面上呈现新视图时，现有功能仍在执行。例如：

指令：

angular.module('app')
  .directive('gallery', function ($location) {
    return function (scope, element, attrs) {
      setInterval(function () {
        //This is where I would change the classes on the element
        //This will continually execute, even when on a different view
      }, 500);
    }
  });

HTML视图

<div gallery>
    Something special
</div>

当指令在页面上时，我有没有办法只执行间隔功能？

Answer 1

您可以取消$destroy事件的间隔。

var intervalPromise = $interval(function() {
  // do your operation
}, 500);

element.on('$destroy', function() {
   $interval.cancel(intervalPromise);
});

以下是文档的链接：https://docs.angularjs.org/guide/directive

Answer 2

你应该使用$ interval： -

    var promise=$interval(function () {

    }, 500);
    $rootScope.$on("$locationChangeStart", function(event, next, current) { 

        if(next!=current)
            $interval.cancel(promise);

    });

或者如果您使用的是setInterval： -

var promise=setInterval(function () {
      }, 500);
$rootScope.$on("$locationChangeStart", function(event, next, current) { 

        if(next!=current)
           clearInterval(promise);

    });

如何在路由更改后停止在angular指令上执行setInterval函数

2 个答案: