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

时间：2016-01-11 08:36:36

标签： jquery ruby-on-rails angularjs

我最初只在加载页面时收到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页而没有重新加载任何页面之后 -

enter image description here

一旦我重新加载页面，我就不会收到警告，绑定也能正常工作。

3 个答案:

答案 0 :(得分：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有可能决定加载默认根文档。

答案 1 :(得分：1)

检查

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>

答案 2 :(得分：1)

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

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

我相信有两种解决方案。

解决方案1 ​​ - 删除Turbolinks

我从Layout的页面JS参考中删除了Turbolinks并重新启动了服务器，一切似乎都运行良好。

以下是我的javascript引用的样子 - 

jquery
jquery-ujs
jquery-ui
angular
foundation

如果你没有真正使用Turbolinks，你可以删除它。

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

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

但显然，明确的答案似乎对我有用。

正如其中一条评论指出的那样，它适用于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>

希望这有助于某人。

相关问题
最新问题