项目中使用了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. Xvfb+YSlow+ShowSlow搭建前端性能测试框架 - 前端技术 | TaoBaoUED

    Xvfb+YSlow+ShowSlow搭建前端性能测试框架 - 前端技术 | TaoBaoUED Xvfb+YSlow+ShowSlow搭建前端性能测试框架 作者:黑三 | 时间:2010-07-07 ...

  2. http协议与http代理

    TCP/IP协议族 TCP/IP(Transmission Control Protocol/InternetProtocol.传输控制协议/网际协议)是用于计算机通信的一个协议族. TCP/IP协议 ...

  3. linux 进程间信号量管理程序之sem_timedwait使用

    在开发过程中,有三个独立执行的程序模块,三个模块都对sqlite数据库进行读写操作.sqlite在linux共享性较差,所以须要增加相互排斥信号量解决三个模块訪问数据库该问题. 另外,在增加信号量后, ...

  4. 都div在所有li的html()值被设置&quot;哈哈&quot;，当点击设置&quot;我被点击&quot;,其余的还是不点击设置“哈哈”

    <1> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. Struts2 API的chm格式帮助文档制作教程

    Struts2 API的chm格式帮助文档制作教程 在SSH三个框架中,Struts2的API文档是最难做的,这里所说的格式是chm格式的,chm的格式很方便,Hibernate API文档和Spri ...

  6. js静态方法和实例方法

    js静态方法 function foo(){} // 声明类 foo.method = function(){} // 方法体 使用:foo.method() js实例方法 function foo( ...

  7. 将一个数转化为二进制后，求其中1的个数 C++

    #include <iostream>using namespace std;int func(int x){ int count=0; while(x) { x=x&(x-1); ...

  8. Oracle Hint用法总结

    1. /*+ALL_ROWS*/ 表明对语句块选择基于开销的优化方法,并获得最佳吞吐量,使资源消耗最小化. 例如: SELECT /*+ALL+_ROWS*/ EMP_NO,EMP_NAM,DAT_I ...

  9. linux系统调用和库函数调用的区别(转)

    Linux下对文件操作有两种方式:系统调用(system call)和库函数调用(Library functions).可以参考<Linux程序设计>(英文原版为<Beginning ...

  10. 深入浅出—JAVA(9)

    9.构造器与垃圾收集器 调用父类构造函数的唯一方法是调用super().