具有角度的涡轮链接

Question

我正在运行Angular 1.6以及Turbolinks 5. 5.在大多数情况下，事情运作良好。根据本文的某些建议，我禁用了涡轮链接缓存和AM手动引导角：使用带有Turbolinks的AngularJS

我已经遇到了一个问题，尽管我在服务中有$间隔运行。当通过Turbolinks更改页面时，Angular Bootstraps再次创建了一个新的间隔，但是旧的间隔仍在继续运行！每次发生页面更改事件时，都会创建一个新的间隔，并且它们不断堆积在彼此之上。

单击涡轮链接链接时（使用下面的代码）尝试破坏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的信用来自此处：如何访问/更新$ rootscope从外部Angular