Question

我在使用AngularJS的网站上工作。我正在尝试添加turbolinks，但它不止一次加载角度。

我在Head标记<script src="/scripts/turbolinks.js"></script>中调用turbolinks.js，在页脚中调用角文件。

我使用angular.module('myApp', [myServices])声明我的应用，myApp是我的应用<body ng-app="myApp" ng-controller="ApplicationController">的名称。

我试图在我的项目中使用没有AngularJS的Turbolinks并且它正在工作但是当我添加AngularJS时，此警告显示为WARNING: Tried to load angular more than once.。

如何在同一个项目中使用Turbolinks和AngularJS？

Answer 1

有一个关于此页面的解决方法的讨论，让turbolinks不与div或它的内容交互。我猜你可以将相同的逻辑应用到angularjs app容器中。

https://github.com/turbolinks/turbolinks/issues/155

在他们的情况下，他们将内容包装在div id="container"中，然后使用一些javascript来处理它。

HTML：

<div id="permanent">...stuff...</div>

和Javascript：

$(document).on('turbolinks:click',function (){
  def turbolink_permanent(id, &block)
    anchor = content_tag(:div, "permanent #{id}", "data-turbolinks-permanent": true, id: id)
    return anchor if request.env["HTTP_TURBOLINKS_REFERRER"]
    html = capture(&block)
    anchor << javascript_tag("document.getElementById('#{id}').innerHTML = #{html.inspect};")
  end
}

Answer 2

我在Head标记中调用turbolinks.js，在页脚中调用角度文件。

为防止Angular JS加载两次，您需要在<head>（而不仅仅是turbolinks.js）中包含Angular文件。

当通过Turbolinks加载页面时，它会评估正文中的脚本标记，因此如果您的Angular文件包含在各页面的页脚中，它将多次加载它们。

如何在没有负载角度的项目中多次使用turbolinks和AngularJS？

2 个答案: