项目中使用了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. HDU 2104 hide handkerchief

    题解:由题目可以知道,如果n和m的最大公约数不为1,那么总有箱子是无法遍历的,所以求一遍GCD就可以判断了. 注意点:一定要记住判断是==,在做题时又忘了. #include <cstdio&g ...

  2. Node.mongoose

    简介 mongodb是一款面向文档的数据库,不是关系型数据库,新手熟悉mysql.sqlserver等数据库的人可能入手稍微困难些,需要转换一下思想,可以不需要有固定的存储模式,以文档模型为存储内容相 ...

  3. 如何设计一个 iOS 控件?(iOS 控件完全解析)

    前言 一个控件从外在特征来说,主要是封装这几点: 交互方式 显示样式 数据使用 对外在特征的封装,能让我们在多种环境下达到 PM 对产品的要求,并且提到代码复用率,使维护工作保持在一个相对较小的范围内 ...

  4. Java中有关构造函数的一道笔试题解析

    Java中有关构造函数的一道笔试题解析 1.详细题目例如以下 下列说法正确的有() A． class中的constructor不可省略 B． constructor必须与class同名,但方法不能与c ...

  5. 对象图（Object Diagram）—UML图（三）

    一.用一张图来介绍一下对象图的基本内容 二.对象图与类图的基本差别 三.对象图实例

  6. 用Aspose.Cells控件读取Excel

    Aspose是一个很强大的控件,可以用来操作word,excel,ppt等文件,用这个控件来导入.导出数据非常方便.其中Aspose.Cells就是用来操作Excel的,功能有很多.我所用的是最基本的 ...

  7. aop切入点表达式

    1.切入点表达式:对指定的方法进行拦截,并且生成代理表达式. 2.拦截所有public方法 <aop:pointcut expression="execution(public * * ...

  8. FreeCodeCamp：Slasher Flick

    要求: 打不死的小强! 返回一个数组被截断n个元素后还剩余的元素,截断从索引0开始. 结果: slasher([1, 2, 3], 2) 应该返回 [3]. slasher([1, 2, 3], 0) ...

  9. myeclipse部署时An internal error occurred 错误的几种情况

    myecplise上将工程部署到应用下时,经常出现 An internal error occurred during: "Add Deployment". java.lang.N ...

  10. NOIP2015

    现在来总结一下. 斗地主 这题的题目描述感觉不太清晰,当时有很多人去问,但都没有得到任何回应.好吧,虽然我也是似懂非懂,但是就算看清楚了题目又能怎么样呢. 首先这题只能够搜索吧,或者说是DP,不过有很 ...