我正在尝试在我的应用程序中使用 Angularjs 框架和 turbolinks。页面更改后，它不会初始化新的事件监听器。有什么办法让它工作吗？提前致谢！
【问题讨论】：
标签： ruby-on-rails angularjs turbolinks
Turbolinks 和 AnguluarJS 都可以用来使 Web 应用程序响应更快，因为响应用户交互，网页上会发生一些事情无需重新加载和重新呈现整个页面。
它们在以下方面有所不同：
AngularJS 可帮助您构建富客户端应用程序，您可以在其中编写大量运行在客户端计算机上的 JavaScript 代码。此代码使站点与用户交互。它使用 JSON API 与服务器端后端（即 Rails 应用程序）进行通信。
Turbolinks 有助于使网站具有交互性，而无需您编写 JavaScript 代码。它允许您坚持使用在服务器端运行的 Ruby/Rails 代码，并且仍然“神奇地”使用 AJAX 替换并因此仅重新呈现已更改的页面部分。
Turbolinks 的强大之处在于允许您使用这种强大的 AJAX 机制而无需手动执行任何操作，只需编写 Ruby/Rails 代码，随着您的应用程序的增长，您可能会想要集成 JavaScript 框架，例如 AngularJS .
特别是在这个中间阶段，您希望将 AngularJS 连续集成到您的应用程序中，一次一个组件，将 Angular JS 和 Turbolinks 一起运行是非常有意义的。
在您的 Angular 代码中，您有一行定义您的应用程序模块，如下所示：
# app/assets/javascripts/angular-app.js.coffee
# without turbolinks
@app = angular.module 'MyApplication', ['ngResource']
此代码在页面加载时运行。但是由于 Turbolinks 只是替换了页面的一部分并阻止了整个页面的加载，因此您必须确保 angular 应用程序已正确初始化（“引导”），即使在 Turbolinks 完成此类部分重新加载之后也是如此。因此，将上面的模块声明替换为以下代码：
# app/assets/javascripts/angular-app.js.coffee
# with turbolinks
@app = angular.module 'MyApplication', ['ngResource']
$(document).on 'turbolinks:load', ->
angular.bootstrap document.body, ['MyApplication']
您经常在教程中看到如何通过在 HTML 代码中使用 ng-app 属性自动引导 Angular 应用程序。
<!-- app/views/layouts/my_layout.html.erb -->
<!-- without turbolinks -->
<html ng-app="YourApplication">
...
但是将这种机制与上面显示的手动引导一起使用会导致应用程序引导两次，因此会导致应用程序停止。
因此，只需删除此ng-app 属性：
<!-- app/views/layouts/my_layout.html.erb -->
<!-- with turbolinks -->
<html>
...
【讨论】：
ng-click="save()" 然后重新加载视图...我的 save() 方法现在触发了 3 次。有什么想法吗？
<head> 部分来解决多个事件问题和可能的其他错误场景（因此，防止了我的脚本的多个实例化）。这不是面向公众的体验，所以我不太担心在 html head 部分加载 JS 的陷阱。
Uncaught Error: [ng:btstrpd] App Already Bootstrapped with this Element 'document'。显然一个元素只能是bootstrapped once。将angular.bootstrap(document, ['YourApplication']) 更改为angular.bootstrap("body", ['YourApplication']) 似乎没有任何问题。
$(document).on 行中删除“ready”，并添加了$ ->
$(document).on "turbolinks:load", -> …。谢谢！
Turbolinks 试图优化页面的渲染，会与 AngularJS 的正常引导冲突。
如果您在应用的某些地方使用 Turbolinks，而某些部分使用 Angular。我提出这个优雅的解决方案：
每个指向 angularapp 页面的链接（使用 ng-app="appname"）都应该有这个属性：
<a href="/myapp" data-no-turbolink>Say NO to Turbolinks</a>.
第二个 - 在 Stackoverflow 上提到的是通过处理 page:load 事件显式地重新加载/引导每个 ng-app。我认为这是侵入性的，更不用说您可能会加载页面上没有的内容，从而浪费资源。
我个人使用过上述解决方案。
希望对你有帮助
【讨论】：
如果出现错误
未捕获的错误：[ng:btstrpd] 应用程序已通过此引导 元素“文档”
升级到 Angular 1.2.x 后，您可以使用下面的方法来解决问题。
angular.module('App').run(function($compile, $rootScope, $document) {
return $document.on('page:load', function() {
var body, compiled;
body = angular.element('body');
compiled = $compile(body.html())($rootScope);
return body.html(compiled);
});
});
在之前的帖子中，@nates 建议将 angular.bootstrap(document, ['YourApplication']) 更改为 angular.bootstrap("body", ['YourApplication'])，但这会导致未编译内容的闪现。
【讨论】：
将以下事件处理程序添加到您的应用程序。
咖啡脚本：
bootstrapAngular = ->
$('[ng-app]').each ->
module = $(this).attr('ng-app')
angular.bootstrap(this, [module])
$(document).on('page:load', bootstrapAngular)
Javascript：
function bootstrapAngular() {
$('[ng-app]').each(function() {
var module = $(this).attr('ng-app');
angular.bootstrap(this, [module]);
});
};
$(document).on('page:load', bootstrapAngular);
这将导致在 Turbolinks 加载每个页面后启动 Angular 应用程序。
【讨论】：
$(document).on('ready', bootstrapAngular)。
Turbolinks 对于客户端 MVC 框架不太有意义。 Turbolinks 用于从服务器响应中去除除正文之外的所有内容。使用客户端 MVC，您应该只将 JSON 传递给客户端，而不是 HTML。
无论如何，turbolinks 都会创建自己的回调。
page:load
page:fetch
page:restore
page:change
【讨论】：
jquery.turbolinks 插件可以通过 ng-app 指令触发模块的引导。如果您尝试手动引导模块，jquery.turbolinks 可能会导致 ng:btstrpd 错误。我发现的一个警告是 jquery.turbolinks 依赖于 page:load 事件，该事件可以在任何新的页面特定 <script> 标记完成运行之前触发。如果您在 application.js 之外包含模块定义，这可能会导致 $injector:nomod 错误。如果您确实希望在仅包含在某些页面上的单独 javascript 文件中定义您的模块，您可以通过 data-no-turbolink 在指向这些特定页面的任何链接上 disable turbolinks。
【讨论】：
根据我看到的 cmets，如果我有一个现有的应用程序，那么以 Angular 与 Turbolinks 冲突的方式（例如我允许 Angular 处理某些路由的地方）同时使用两者的唯一有效场景是我正在尝试移植到 Angular。
就个人而言，如果我要从头开始执行此操作，我认为最好的解决方案是决定应该处理路由并坚持下去。如果是 Angular，那么摆脱 Turbolinks -> 如果您有接近单页应用程序的东西，它不会为您做太多事情。如果您允许 Rails 处理路由，那么只需使用 Angular 来组织在提供模板时服务器无法处理的客户端行为。
我在这里错过了一个场景吗？即使在大型应用程序中，尝试在不同框架之间拆分路由职责对我来说似乎并不优雅......除了刷新页面或导航到新路由之外，是否存在其他一些 Turbolinks 会干扰 Angular 的场景？
【讨论】：
+1 到@fiedl 以获得很好的答案。但我更喜欢使用page:change 和page:load，因为这提供了一些灵活性：DOM 可以从turbolinks 以外的源接收page:load 事件，所以你可能不希望有相同的回调触发。
注意 page:change，然后 page:load 应该将您的回调行为限制为仅由 turbolinks 发起的事件。
function boostrapAngularJS () {
angular.bootstrap(document.body, ['My Application']);
addCallbackToPageChange();
}
function addCallbackToPageChange() {
angular.element(document).one('page:change', function () {
angular.element(this).one('page:load', boostrapAngularJS);
});
}
addCallbackToPageChange();
（这将允许/要求您在 html 中保留 ng-app 声明，与使用 AngularJS 时一样。）
【讨论】：
Turbolinks 自动获取页面，交换其
<body>，并合并其<head>，所有这些都不会产生整个页面加载的成本。
https://github.com/turbolinks/turbolinks#turbolinks
因此，我们可以在 <body> 元素上执行，而不是在 <html> 元素上附加 ng-app 指令。
<html>
<body ng-app=“yourApplicationModuleName">
</body>
</html>
【讨论】：