具有Angular的TurboLinks [英] TurboLinks with Angular

问题描述

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

I'm running Angular 1.6 along with TurboLinks 5. For the most part, things are working well. I disabled TurboLinks cache and am manually bootstrapping Angular per some of the suggestions on this post: Using angularjs with turbolinks

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

I have run into one issue though where I have an $interval running within a service. When changing pages via TurboLinks, Angular bootstraps again and the service creates a new interval, but the old one continues to run! Every time a page change event occurs, a new interval is created and they keep piling on top of each other.

我试图在单击TurboLinks链接时销毁angular应用程序（使用以下代码），但这似乎导致整个Angular应用程序退出工作。页面重新加载后，我似乎也无法获得旧间隔的引用。

I tried destroying the angular app when a TurboLinks link is clicked (using the code below), but that seems to cause the whole Angular app to quit working. I also can't seem to get a reference to the older interval after a page reload.

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（）在 turbolinks：click 事件中，其他所有功能似乎都按预期运行。

Without the $rootScope.$destroy() on the turbolinks:click event, everything else appears to be working as expected.

我知道我可以解雇在这里关闭一个事件并取消服务中的时间间隔，但是理想情况下，我希望以某种方式自动处理此问题，并确保在TurboLinks请求之间不会意外转移任何内容。有任何想法吗？

I know I could fire off an event here and kill the interval in the service, but ideally I'd like some way where this is automatically handled and ensured nothing is accidentally carried over between TurboLinks requests. Any ideas?

推荐答案

经过大量的试验和错误，这确实可以完成工作，但并不是我所要查找的对于。想听听别人是否有任何建议。如果可以自动进行而无需服务取消自己的间隔，那将是理想的选择。同样以这种方式访问​​ $ rootScope 感觉也很脏...

After a lot of trial and error, this does the job, but is not exactly what I'm looking for. Would like to hear if anyone else has any suggestions. It would be ideal if this could happen automatically without a service having to remember to cancel it's own intervals. Also accessing $rootScope in this manner just feels so dirty...

// 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 事件后，它将取消间隔：

I'm then injecting $rootScope into my service as well as keeping a reference to the interval. Once it hears the page.leaving event, it cancels the interval:

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

....

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

这样就可以完成工作了……但是很想找到一个更好的方法。通过这种方式访问​​ $ rootScope 的功劳来自这里：如何从Angular外部访问/更新$ rootScope

So this gets the job done... but would love to find a better way. Credit for accessing $rootScope this way came from here: How to access/update $rootScope from outside Angular

这篇关于具有Angular的TurboLinks的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！