1

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

尽管我在服务中运行了 $interval，但我遇到了一个问题。当通过 TurboLinks 更改页面时，Angular 会再次引导，服务会创建一个新的时间间隔，但旧的时间间隔会继续运行！每次发生页面更改事件时，都会创建一个新的间隔，并且它们会相互叠加。

当单击 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();
    }]);
});

如果没有$rootScope.$destroy()onturbolinks:click事件，其他一切似乎都按预期工作。

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

4

1 回答 1

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来自这里：如何从 Angular 外部访问/更新 $rootScope

于 2016-12-18T07:27:23.523 回答