TurboLinks with Angular

Question

Я запускаю Angular 1.6 вместе с TurboLinks 5. По большей части все работает хорошо. Я отключил кеш TurboLinks и вручную загрузил Угловое значение для некоторых предложений в этом сообщении: Using angularjs with turbolinks

У меня возникла одна проблема, хотя у меня есть интервал $, выполняемый внутри службы. При смене страниц через TurboLinks снова активируются угловые бутстрапы, и служба создает новый интервал, но старый продолжает работать! Каждый раз, когда происходит событие изменения страницы, создается новый интервал, и они продолжают складывать друг друга.

Я попытался уничтожить угловое приложение, когда нажата ссылка TurboLinks (с использованием кода ниже), но это похоже на то, что все угловые приложения перестали работать. Я также не могу получить ссылку на более старый интервал после перезагрузки страницы.

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 события, все остальное, кажется, работает, как ожидалось.

Я знаю, что я мог бы запустить здесь мероприятие и убить интервал в службе, но в идеале я хотел бы, чтобы каким-то образом это автоматически обрабатывалось и гарантировало, что между запросами 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