“尝试多次加载角度”警告 - 仅在初始页面加载时答案

【问题标题】："Tried to load angular more than once" warning - Only on initial page load“尝试多次加载角度”警告 - 仅在初始页面加载时
【发布时间】：2016-01-11 08:36:35
【问题描述】：

我仅在最初加载页面时收到Tried to load angular more than once 警告。

由于这个警告，我的绑定似乎不起作用。但是当我重新加载页面时，我没有收到警告，而且一切似乎都绑定并正常工作。

我没有使用任何路由或 ui-view！（我看过其他 SO 帖子，我认为它们不适用于我的情况）。

我仔细检查并确保我只引用了一次 Angular JS。在这一点上，我对 Angular JS 的使用非常简单。

我在布局/母版页中按此顺序引用了 Angular JS -

jquery
jquery-ujs   // Rails Unobtrusive jQuery Adapter
jquery-ui
angular
foundation  // ZURB Foundation 6
turbolinks  // Rails Turbolinks

这是我的 Angular 模板的样子 -

<body ng-app="test">
   <div ng-controller="TestController">
      <div ng-init="items = <%= items.to_json %>">
         <div ng-repeat="item in items">
           <p ng-bind="item"></p>
         </div>
      </div>
   </div>
</body>

items 是一个 Rails 对象，我基本上将它交给 Angular 进行初始加载。

这是我在布局页面中的 Javascript 中的内容 -

var app = angular.module('test', []);

这是我在 Javascript 中用于查看/内容页面的内容 -

app.controller('TestController', ['$scope', '$http', '$compile',    function($scope, $http, $compile){ 
   // Some Functions
}]);

任何帮助将不胜感激！

注意：Tried to load angular more than once 警告会出现在我访问的每个页面上，除非我重新加载页面并且我没有收到警告并且绑定似乎工作正常。

这是一个截图，在访问了 4 个页面后没有重新加载任何一个 -

重新加载页面后，我没有收到警告，并且绑定正常工作。

【问题讨论】：

检查<div ng-repeat="item in <%= items.to_json %>">
抱歉！我在那条线上有一个ng-init。修改了代码。
尽量避免在控制器内部使用ng-init (docs.angularjs.org/api/ng/directive/ngInit)，因为可以在控制器本身内赋值（通过$scope）
@OlegMeleshko - 仍然收到警告并具有相同的行为

标签： jquery ruby-on-rails angularjs

【解决方案1】：

试试这个 html 代码：

<body ng-app="test">
   <div ng-controller="TestController" ng-init="init(<%= items.to_json %>)">
      <div ng-repeat="item in items">
         <p ng-bind="item"></p>
      </div>
   </div>
</body>

在控制器中：

var app = angular.module('test', []);
app.controller('TestController', ['$scope', function($scope) {        
   $scope.items = [];
   // ...
   $scope.init = function(items) {
     $scope.items = items;
   }; 
}]);

之后请检查是否缺少模板文件（未正确加载）。有可能routerProvider 在尝试加载指定模板失败后决定加载默认根文档（templateUrl 错误或未加载）。

【讨论】：

【解决方案2】：

检查

1) 您的浏览器网络选项卡是否显示多个 angular.js 引用？

2) 让我们看看问题是否是由于内部代码造成的。对于该注释，ng-controller div 中的整个代码。

<body ng-app="test">
<div ng-controller="TestController">
  <!--<div ng-init="items = <%= items.to_json %>">
          <div ng-repeat="item in items">
            <p ng-bind="item"></p>
          </div>
  </div>-->
</div>
</body>

【讨论】：

【解决方案3】：

我终于解决了这个问题。这不是Angular JS（或只是Angular JS）的问题。

我删除了所有 Angular JS 代码，但仍然收到警告。问题在于 Turbolinks。

我相信有两种解决方案。

解决方案 1 - 删除 Turbolinks

我从布局页面的 JS 引用中删除了 Turbolinks，然后重新启动了服务器，一切似乎都正常。

这是我的 javascript 引用的样子 -

jquery
jquery-ujs
jquery-ui
angular
foundation

如果你不是真的在使用 Turbolinks，你可以把它移除。

解决方案 2 - 添加 `data-no-turbolink` 属性

我遇到了这个帖子 - Using angularjs with turbolinks

但显然，标记的答案似乎对我不起作用。

正如其中一位 cmets 所指出的，它适用于 angular-1.0.6 及以下。

虽然，其中一个答案建议将data-no-turbolink 属性添加到您指定ng-app 的标记中。这就像一个魅力。

我的 Angular 版本是 1.4.8

所以，这就是我的 Angular 模板现在的样子 -

<body ng-app="test" data-no-turbolink>
  <div ng-controller="TestController">
     <div ng-init="items = <%= items.to_json %>">
        <div ng-repeat="item in items">
          <p ng-bind="item"></p>
        </div>
     </div>
  </div>
</body>

希望这对某人有所帮助。

【讨论】：

解决方案 1 - 删除 Turbolinks

解决方案 2 - 添加 data-no-turbolink 属性

解决方案 2 - 添加 `data-no-turbolink` 属性