带角度的TurboLinks

Question

我运行的是Angular 1.6和TurboLinks 5，大多数情况下，一切都运行得很好。我禁用了TurboLinks缓存，并根据这篇文章中的一些建议手动引导Angular：Using angularjs with turbolinks

但是，我遇到了一个问题，即在服务中运行$interval。当通过TurboLinks更改页面时，Angular bootstraps再次启动，服务创建一个新的间隔，但旧间隔继续运行！每次发生页面更改事件时，都会创建一个新的间隔，并将它们堆叠在一起。

我尝试在点击TurboLinks链接时销毁angular应用程序(使用下面的代码)，但这似乎导致整个Angular应用程序停止工作。在页面重新加载后，我似乎也无法获得对较旧间隔的引用。

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

// Bootstrap Angular on TurboLinks Page Loads
document.addEventListener('turbolinks:load', function() {
    console.log('Bootstrap Angular');
    angular.bootstrap(document.body, ['app']);
});

// Destroy the app before leaving -- Breaks angular on subsequent pages
document.addEventListener('turbolinks:click', function() {
    console.log('Destroy Angular');
    var $rootScope = app.run(['$rootScope', function($rootScope) {
        $rootScope.$destroy();
    }]);
});

在没有turbolinks:click事件上的$rootScope.$destroy()的情况下，其他一切似乎都能正常工作。

我知道我可以在这里触发一个事件，并终止服务中的间隔，但理想情况下，我希望有某种方式自动处理这一点，并确保不会意外地在TurboLinks请求之间传递任何东西。有什么想法吗？

Answer 1

经过大量的试验和错误，这就完成了工作，但并不完全是我想要的。我想听听其他人是否有什么建议。如果这可以自动发生，而不需要服务记得取消它自己的时间间隔，那将是最理想的。而且，以这种方式访问$rootScope感觉很脏……

// Broadcast Event when TurboLinks is leaving
document.addEventListener('turbolinks:before-visit', function(event) {
    console.log('TurboLinks Leaving', event);
    var $body = angular.element(document.body);
    var $rootScope = $body.injector().get('$rootScope');
    $rootScope.$apply(function () {
        $rootScope.$broadcast('page.leaving');
    });
});

然后，我将$rootScope注入到我的服务中，同时保持对间隔的引用。一旦它听到page.leaving事件，它就会取消间隔：

var self = this;
self.interval = $interval(myFunction, intervalPoll);

....

$rootScope.$on('page.leaving', function() {
    $interval.cancel(self.interval);
});

所以这就完成了工作。但很想找个更好的方法。以这种方式访问$rootScope的功劳来自这里：How to access/update $rootScope from outside Angular