项目中使用了JQuery和AngularJS框架，近期定位一个问题，原因就是JQuery Ready写在了angularJS controller之前，导致JQuery选择器无法选中须要的元素(由于angularJS controller还没有初始化，dom元素的class属性没有被加入)。于是就引出了一个问题，jquery和angularjs谁先运行谁后运行的问题。当然最好我们编写的代码不要依赖于这样的顺序，依赖于某些顺序的代码更easy出错。

<html>

  <head>

    <script src="jquery-1.10.2.js"></script>

	<script src="angular-1.2.2/angular.js"></script>

	<script>

		$(function(){

			printLogAndWait("first jquery ready.");

		});

		$(function(){

			printLogAndWait("second jquery ready.");

		});

		// 创建moudle1

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

        rootMoudle.controller("root_controller",function($scope){

			printLogAndWait("in angular controller.begin");

			$scope.name="";

			$scope.list = [{name:1},{name:2}];

			printLogAndWait("in angular controller.end");

		});  

		$(function(){

			printLogAndWait("jquery ready right before angular.");

		});

		angular.element(document).ready(function() {

			printLogAndWait("angular ready.begin");

            angular.bootstrap(document.getElementById("root_div"),["module"]);

			printLogAndWait("angular ready.end");

		});  

		$(function(){

			printLogAndWait("jquery ready right after angular.");

		});

		console.log("I am first execute.");

		function printLogAndWait(log, milliseconds)

		{

			console.log(log);

			if(!milliseconds)

			{

				milliseconds = 200;

			}

			var begin = new Date().getTime();

			var end = begin;

			while(end - begin < milliseconds)

			{

				end = new Date().getTime();

			}

		}

	</script>

  </head>

  <body  id="root">

		<div id="root_div" ng-controller="root_controller"></div>

  </body>

</html>

输出结果例如以下：

I am first execute.

first jquery ready.

second jquery ready.

jquery ready right before angular.

angular ready.begin

in angular controller.begin

in angular controller.end

angular ready.end

jquery ready right after angular.

能够看到:JQuery Ready和angularJS controller都是在domready之后运行的，谁在前谁先运行。

(十六)JQuery Ready和angularJS controller的运行顺序问题的更多相关文章

  1. Jmeter （二十六）逻辑控制器 之 Module Controller and Include Controller

    Module Controller ---模块控制器 测试计划设置“独立运行没每个线程组” 线程组2中使用Module Controller执行线程组1中的Sampler: 紧接着,将线程组1disa ...

  2. 十六.jQuery源码解析之Sizzle设计思路.htm

    为了便于后面的叙述,需要了解一些相关术语和约定. 并列选择器表达式:"div,p,a"====>div,p,a是并列的. 块表达式:"div>p"中 ...

  3. 《精通C#》第十六章-动态类型和动态语言运行时-第一节至第四节

    在.Net4.0中引入了一个关键字dynamic,这是一个动态类型关键字.Net中还有一个关键字是var,这是一个隐式类型,可以定义本地变量,此时var所代表的实际的数据类型有编译器在初次分配时决定, ...

  4. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  5. Python 爬虫十六式 - 第六式：JQuery的假兄弟-pyquery

    PyQuery:一个类似jquery的python库 学习一时爽,一直学习一直爽   Hello,大家好,我是 Connor,一个从无到有的技术小白.上一次我们说到了 BeautifulSoup 美味 ...

  6. jQuery-1.9.1源码分析系列（六） 延时对象应用——jQuery.ready

    还记不记得jQuery初始化函数jQuery.fn.init中有这样是一个分支 //document ready简便写法$(function(){…}) } else if ( jQuery.isFu ...

  7. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

  8. Bootstrap<基础十六> 导航元素

    Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切 ...

  9. Web 前端开发人员和设计师必读精华文章【系列二十六】

    <Web 前端开发精华文章推荐>2014年第5期(总第26期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

随机推荐

  1. java面试题系列12

    1.面向对象的特征有哪些方面 a.抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节.抽象 ...

  2. android点滴之PendingIntent的使用

    一概念 PendingIntent就是一个能够在满足一定条件下运行的Intent,它相比于Intent的优势在于自己携带有Context对象.这样他就不必依赖于某个activity才干够存在. 它和I ...

  3. rman 使用catalog备份的演示

    介绍了如何使用catalog方式做RMAN备份,以及如何取消以catalog方式做备份. 第一步:创建RMAN CATALOG表空间及用户. [oracle@oel-01 ~]$ sqlplus / ...

  4. uva311 - Packets（贪心）

    题目:311 - Packets 题目大意:给出1*1, 2*2,3 *3, 4*4, 5*5, 6*6的箱子的个数,如今有若干个6*6的箱子,问最少用多少个箱子能够将给定的箱子都装进去. 解题思路: ...

  5. Scala函数---既存类型

    语法: Type ::= InfixType ExistentialClauses ExistentialClauses ::= „forSome‟ „{‟ ExistentialDcl {semi ...

  6. UC/0S2之中断

    中断是计算机系统处理异步事件的重要机制.当异步事件发生时,事件通常是通过硬件向cpu发出中断请求的.在一般情况下,cpu响应这个请求后会立即运行中断服务程序来处理该事件: 为了处理任务延时.任务调度等 ...

  7. js如何判断一个对象是不是Array？（转载）

    js如何判断一个对象是不是Array? 在开发中,我们经常需要判断某个对象是否为数组类型,在Js中检测对象类型的常见方法都有哪些呢? typeof 操作符 对于Function, String, Nu ...

  8. CSS的float与clear

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  9. struts2 DMI问题

    最新开始学习struts2,在官网上下载的最新的struts2(2.3.15.2), jar包,在使用动态方法调用的时候老是报错,错误代码如下HTTP Status 404 - There is no ...

  10. 高级UNIX环境编程5 标准IO库

    标准IO库都围绕流进进行的 <stdio.h><wchar.h> memccpy 一般用汇编写的 ftell/fseek/ftello/fseeko/fgetpos/fsetp ...