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



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

Js_正则表达式验证 IP

function check() { //alert("IP地址输入非法!"); var pattern=/^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9...
  • mikyz
  • mikyz
  • 2017年04月06日 17:08
  • 240

JS正则表达式验证IP地址

var ip="255.255.255.255"; alert(isIP(ip)); alert(isIP2(ip)); function isIP(ip) { var ...

Js&jQuery 执行顺序-ready&load&unload

Js执行顺序1.函数的声明和调用 JavaScript是一种描述型脚本语言,由浏览器进行动态的解析与执行。函数的定义方式大体有以下两种,浏览器对于不同的方式有不同的解析顺序。 代码如下: //...

js在html中的加载执行顺序,多个jquery ready执行顺序

jQuery $(document).ready()执行顺序: 当页面DOM 元素全部加载完毕后就执行.ready()。$(document).ready()是DOM结构绘制完毕后就执行,不必等到加...

jQuery中$(function()与(function($)、$(function(){ }) = $(document).ready(function(){ })及页面加载顺序

原文出处: (function($) {…})(jQuery); 这里实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用...

jquery ajax顺序执行问题

  • 2013年07月02日 15:16
  • 378B
  • 下载

jQuery控制在ready之后执行方法

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...

[爬坑]关于angularJS的controller文件压缩的问题

前言独自摸索最大的麻烦就是遇到奇怪的问题,比如我一下午都在爬一个坑,就是angularJS的controller文件用gulp打包压缩后网页上一直报错。期初还以为是angularJS的版本问题,傻逼比...

jquery中ajax函数执行顺序问题 ---设置同步

jquery中ajax函数执行顺序问题     [问题点数:50分,结帖人kingmaple]        不显示删除回复       显示所有回复       显示星级回复      ...

“HD controller not ready”的解决方法

遇到的问题制作根文件系统(minix文件系统)步骤时遇到bochs提示HD controller not ready的崩溃错误,以下是步骤 首先用bximage制作空的Image文件 然后再SLS L...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:(十六)JQuery Ready和angularJS controller的执行顺序问题
举报原因:
原因补充:

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