(十六)JQuery Ready和angularJS controller的执行顺序问题

原创 2015年07月07日 11:54:04

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


<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之后执行的,谁在前谁先执行。



版权声明:本文为博主原创文章,未经博主允许不得转载。

angularJs控制器执行顺序

js书写控制器的顺序无所谓,它不会立刻实例化这些控制器,也不会在加载js以后就执行控制器里的代码,也不会注入服务和指令. 当解析html的时候,它的ng-controller遇到什么控制器,它就去实例...
  • yclfdn2004
  • yclfdn2004
  • 2016年05月26日 16:07
  • 3102

(十七)JQuery框架一定要在angularJS之前加载

这是因为angular.element()这个API并不能支持类似jquery的选择器,也就是说angular.element()并不支持selector。最好引入JQuery框架,因为jQuery框...
  • aitangyong
  • aitangyong
  • 2015年08月31日 14:33
  • 5106

判断AngularJS渲染页面完成

写demo的时候需要调整页面高度,之前用jquery的时候一直是 $(document).ready() 来判断页面渲染完成 但是到了angularjs之后,不起作用…………...
  • xinshangshangxin
  • xinshangshangxin
  • 2015年03月28日 13:34
  • 24876

angular controller不起作用解决方案

目前碰到不止controller 不执行,还有{{firstName+""+lastName}} 这种正常输出也不执行, 后面发现原因 也就是说 你ng-app可能重复定义了,检查下吧, 后面...
  • xuelang532777032
  • xuelang532777032
  • 2016年09月04日 11:21
  • 858

AngularJs的controller 多次执行问题

AngularJs的Controller多次执行问题
  • qbian
  • qbian
  • 2017年04月12日 09:59
  • 1439

angularjs加载文件的顺序

引入文件的顺序 由此引申jquery的加载顺序 望后期注意
  • chuhang123
  • chuhang123
  • 2016年10月22日 20:27
  • 1559

AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

基于项目实例解析ng启动加载过程前言      在AngularJS项目开发过程中,自己将遇到的问题进行了整理。回过头来总结一下angular的启动过程。      下面以实际项目为例进行简要讲解。1...
  • sunhuaqiang1
  • sunhuaqiang1
  • 2016年05月26日 21:55
  • 57172

AngularJS执行流程详解(转载)

摘要: 本文详细介绍了从页面开始加载到页面渲染完毕过程中,AngularJS执行了哪些操作。 一、启动阶段 大家应该都知道,当浏览器加载一个HTML页面时,它会将HMTL...
  • Manarola
  • Manarola
  • 2017年02月13日 12:45
  • 1471

angular同一个页面多个controller值传递

//父级 //自己 click me //子级 //平级 ...
  • chenhua4088
  • chenhua4088
  • 2016年02月25日 11:48
  • 5500

AngularJS controller调用factory

1、定义 factory.js 文件 var appFactorys = angular.module('starter.factorys', []) appFactorys.factory('Hou...
  • KingCruel
  • KingCruel
  • 2017年03月14日 14:42
  • 1524
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:(十六)JQuery Ready和angularJS controller的执行顺序问题
举报原因:
原因补充:

(最多只允许输入30个字)