项目中使用了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. Android中库项目、jar包等的使用方法

    在软件开发过程中,程序代码的复用,是非常重要的概念.我们总是需要使用一些现有的模块.包.框架,或开发自己的模块.包.框架,来实现对程序代码的复用.比如在JavaWeb编程过程中,经常使用的Struts ...

  2. mysql待整理

    1. MYSQL SQL_NO_CACHE的真正含义 http://www.dewen.org/q/5149/Mysql 是 结果不缓存,但查询还是缓存了. 如果要重新测试,就在查询前先执行一下&qu ...

  3. 行列转换小结 Pivot ，Unpivot （转，改）

    行专列 Pivot 1)SQL 2000版本 静态 SELECT ID , SUM(CASE Code WHEN 'Item1' THEN Value END) AS Item1 , SUM(CASE ...

  4. win7 64位下如何安装配置mysql-5.7.4-m14-winx64

    win7 64位下如何安装配置mysql-5.7.4-m14-winx641. mysql-5.7.4-m14-winx64.zip下载 官方网站下载地址:http://dev.mysql.com/g ...

  5. wget 无法下载jdk的处理办法

    完整语句:wget --no-cookie --no-check-certificate --header "Cookie: gpw_e24=http%3A%2F%2Fwww.oracle. ...

  6. 405 HTTP method GET is not supported by this URL

    孙鑫java web开发详解P285里面提交Get网站弹出提示405 HTTP method GET is not supported by this URL 原因父类doGet()方法未覆盖. 应写 ...

  7. 无法更新 EntitySet“GuigeInfo”，因为它有一个 DefiningQuery，而 <ModificationFunctionMapping> 元素中没有支持当前操作的 <InsertFunction> 元素。

    1:实体中必须有主键 2:删除创建的模型重新创建

  8. QStringLiteral的两篇外文解释（编译期转换成QString）

    http://blog.qt.io/blog/2014/06/13/qt-weekly-13-qstringliteral/ https://woboq.com/blog/qstringliteral ...

  9. Android dp和sp的用法汇总

    1 > dp 是跟像素密度无关的单位,也就是说在相同尺寸.但不同的分辨率的手机上,用dp标识的东西,显示的大小是一样的. sp是用于标识字体的,它不仅跟屏幕尺寸有关,还跟设置的系统字体大小有关. ...

  10. Block动画 和 Spring动画

    Block动画: @interface BlockViewController () @property (weak, nonatomic) IBOutlet UIView *playView; @e ...