带有角度的TurboLinks

我正在运行Angular 1.6以及TurboLinks 5.大多数情况下，情况都很好。我禁用TurboLinks缓存，并且手动引导Angular根据本文中的一些建议：Using angularjs with turbolinks 带有角度的TurboLinks

我遇到了一个问题，虽然我在服务中运行了$ interval。当通过TurboLinks更改页面时，Angular会自动引导并重新创建一个新的时间间隔，但旧的继续运行！每次发生页面更改事件时，都会创建一个新的时间间隔，并且它们会一直堆叠在一起。

我试着在单击TurboLinks链接（使用下面的代码）时销毁角度应用程序，但这似乎导致整个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()上turbolinks:click事件，一切似乎工作正常。

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

来源

2016-12-18 Ryan

经过大量的试验和错误，这样做的工作，但不是我正在寻找。希望听到其他人是否有任何建议。如果这可能会自动发生，而服务不得不记得取消它自己的时间间隔，那将是理想的。还访问$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

来源

2016-12-18 07:27:23 Ryan

带有角度的TurboLinks

回答

相关问题