项目中使用了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对象复制

    一,a和b都指向同一个对象,改变其中一个另一个也会改变 package com.ciaos; class Human{ public Human(String string, int i) { // ...

  2. poj 2155

    题目链接 二维树状数组 给出矩阵左上角和右下角坐标,矩阵里的元素 1变0 ,0 变1,然后给出询问,问某个点是多少. 树状数组下标不能为0 二维的每次更新都是从(1,1)到(x,y) 要更新(x1,y ...

  3. linux进程间通信之信号

    1.wait()函数 原型:pid_t  wait(int *status) 子进程退出时,它向父进程发送一个SIGCHLD信号,默认情况是总是忽略SIGCHLD信号,此时进程状态一直保留在内存中,因 ...

  4. 语句分类及if语句

    一.语句分类: 1.顺序语句2.分支语句 if语句.switch语句 3.循环语句 (1)初始条件 (2)循环条件 (3)循环体 (4)状态改变 二.if语句: 1.if语句4中情况: if(条件){ ...

  5. D - 1sting(相当于斐波那契数列，用大数写)

    Description You will be given a string which only contains ‘1’; You can merge two adjacent ‘1’ to be ...

  6. BZOJ 1225: [HNOI2001] 求正整数( dfs + 高精度 )

    15 < log250000 < 16, 所以不会选超过16个质数, 然后暴力去跑dfs, 高精度计算最后答案.. ------------------------------------ ...

  7. Laravel OAuth2 (一) ---简单获取用户信息

    前言 本来要求是使用微信进行第三方登陆,所以想着先用 github 测试成功再用微信测试,可是最近拖了好久都还没申请好微信开放平台的 AppID ,所以就只写 github 的第三方登陆吧,估计微信的 ...

  8. QPushButton跑进度条（使用QSS的不同修饰来实现，其实是伪进度条）

    主要用到qlineargradient,写以下CSS样式即可实现: background:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, sto ...

  9. spring aop 笔记2

    Aop面向切面编程 切面(Aspect): 一个关注点的模块化,这个关注点可能会横切多个对象.事务管理是J2EE应用中一个关于横切关 注点的很好的例子.在Spring AOP中,切面可以使用基于模式) ...

  10. Windows Phone 8初学者开发—第8部分：理解编译和部署

    原文 Windows Phone 8初学者开发—第8部分:理解编译和部署 第8部分:理解编译和部署 原文地址: http://channel9.msdn.com/Series/Windows-Phon ...