aty

虽有嘉肴,弗食,不知其旨也;虽有至道,弗学,不知其善也。是故学然后知不足,教然后知困。知不足,然后能自反也;知困,然后能自强也。...

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

项目中使用了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之后执行的,谁在前谁先执行。



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/aitangyong/article/details/46787457
个人分类: jquery AngularJS
上一篇我所见过的最简短、最灵活的javascript日期转字符串工具函数
下一篇javascript真的是异步的吗?且看setTimeout的实现原理以及setTimeout(0)的使用场景
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭