首页 > Js开发 > JQuery Ready和angularJS controller的执行顺序问题

JQuery Ready和angularJS controller的执行顺序问题

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

[html]
  1. <html>  
  2.   <head>  
  3.     <script src="jquery-1.10.2.js"></script>  
  4.     <script src="angular-1.2.2/angular.js"></script>  
  5.     <script>  
  6.         $(function(){  
  7.             printLogAndWait("first jquery ready.");  
  8.         });  
  9.            
  10.         $(function(){  
  11.             printLogAndWait("second jquery ready.");  
  12.         });  
  13.    
  14.         // 创建moudle1    
  15.         var rootMoudle = angular.module('module', []);    
  16.         rootMoudle.controller("root_controller",function($scope){  
  17.             printLogAndWait("in angular controller.begin");  
  18.             $scope.name="";  
  19.             $scope.list = [{name:1},{name:2}];  
  20.             printLogAndWait("in angular controller.end");  
  21.         });    
  22.    
  23.         $(function(){  
  24.             printLogAndWait("jquery ready right before angular.");  
  25.         });  
  26.   
  27.   
  28.         angular.element(document).ready(function() {    
  29.             printLogAndWait("angular ready.begin");  
  30.             angular.bootstrap(document.getElementById("root_div"),["module"]);    
  31.             printLogAndWait("angular ready.end");  
  32.         });    
  33.    
  34.         $(function(){     
  35.             printLogAndWait("jquery ready right after angular.");  
  36.         });  
  37.   
  38.         console.log("I am first execute.");  
  39.           
  40.         function printLogAndWait(log, milliseconds)  
  41.         {  
  42.             console.log(log);  
  43.             if(!milliseconds)  
  44.             {  
  45.                 milliseconds = 200;  
  46.             }  
  47.               
  48.             var begin = new Date().getTime();  
  49.             var end = begin;  
  50.               
  51.             while(end - begin < milliseconds)  
  52.             {  
  53.                 end = new Date().getTime();  
  54.             }  
  55.         }  
  56.     </script>  
  57.   </head>  
  58.     
  59.   <body  id="root">  
  60.         <div id="root_div" ng-controller="root_controller"></div>  
  61.   </body>   
  62. </html>  

输出结果如下:

  1. I am first execute.  
  2. first jquery ready.  
  3. second jquery ready.  
  4. jquery ready right before angular.  
  5. angular ready.begin  
  6. in angular controller.begin  
  7. in angular controller.end  
  8. angular ready.end  
  9. jquery ready right after angular.  

可以看到:JQuery Ready和angularJS controller都是在domready之后执行的,谁在前谁先执行。


本文固定链接: http://www.devba.com/index.php/archives/6281.html | 开发吧

JQuery Ready和angularJS controller的执行顺序问题:目前有2 条留言

  1. 沙发
    kkllzyc:

    社呢么啊?为啥没答案?

    2015-09-29 上午 10:59
    • 孤风一剑:

      输出结果如下:
      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之后执行的,谁在前谁先执行。

      2015-10-29 下午 5:49