javascript – 警告:尝试多次加载角度…因为jQuery …为什么?

我试图了解这里发生了什么.警告是自我解释的,我意识到在应用程序中,使用下面的代码和结构,它运行ng-view两次(‘test’将在控制台中记录两次,所以当然角度加载两次! )….但为什么?

我已经阅读了我能找到的关于它的每一篇文章,它似乎归结为jQuery在角度之前被加载.

如果我遗漏了jQuery或者如果我在angualr之后加载jQuery(这不是我理解的好习惯),没问题.我想让jQuery支持一些功能(特别是ui-sortable).而且,虽然它似乎并没有造成任何问题,但我不想让它运行我的ng-view两次.

我做了一些结构上错误的事情,还是我错过了一个明显的方法解决这个问题?

更新:Plunker of the issue(检查控制台)

index.html的:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <Meta charset="utf-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="description" content="">
    <Meta name="viewport" content="width=device-width,initial-scale=1">

    <title>Site Title</title>

</head>

<body ng-view>
<script type="text/javascript">
    console.log('test')
</script>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
    <script type="text/javascript" src="app_simple.js"></script>
</body>
</html>

app_simple.js:

'use strict';

/**
 * Configure client module
 */
var myApp = angular.module('myApp',[
      'ngRoute'
    ]);

myApp.config(function ($routeProvider) {
  $routeProvider
    .when('/simple',{
      templateUrl: 'components/simple/simple.html',controller: 'SimpleCtrl'
    })
    .otherwise({
        redirectTo: '/x'
    })
});

myApp.controller('SimpleCtrl',['$scope','$log','$http',function($scope,$log,$http){

}]);

simple.html:
我的简单内容

解决方法

好的,总结评论的帮助:

如果包含jQuery,则任何< script>标签included WITHIN an ng-view will be evaluated twice.(谢谢@lossleader!).

我在测试中的错误假设是,当我尝试将ng-view从身体移动到< div>时,它正在处理整个模板内容两次.因为我看了两次日志消息.它不是!

<body>
<div ng-view>
<script>console.log('duplicated if jQuery');</script>
</div>
</body>

所以@Tom和@Wawy都有正确的解决方案.将ng-view移动到< div>或移动< script>标签到< head> (在ng-view之外).

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...