(十六)JQuery Ready和angularJS controller的运行顺序问题
2016-01-31 10:23
746 查看
项目中使用了JQuery和AngularJS框架,近期定位一个问题,原因就是JQuery Ready写在了angularJS controller之前,导致JQuery选择器无法选中须要的元素(由于angularJS controller还没有初始化,dom元素的class属性没有被加入)。于是就引出了一个问题,jquery和angularjs谁先运行谁后运行的问题。当然最好我们编写的代码不要依赖于这样的顺序,依赖于某些顺序的代码更easy出错。
输出结果例如以下:
能够看到:JQuery Ready和angularJS controller都是在domready之后运行的,谁在前谁先运行。
<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创建应用的5个框架
- AngularJS 开发者最常犯的 10 个错误
- 如何使用angularjs实现ajax异步请求
- 如何使用angularjs实现按钮事件
- 初识 Angular 体会
- 如何使用angularjs实现表单验证
- 如何使用angularjs实现文本框设置值
- 如何使用angularjs实现文本框获取焦点
- Salesforce + AngularJS + Bootstrap
- 【NYOJ】[122]Triangular Sums
- angularJS 事件广播与接收
- angularJS DOM element() $compile()
- angularJS factory() service() provider()
- AngularJS中ng-class的用法
- angularJS $routeProvider
- angularjs学习笔记
- Angular 2 开发环境搭建
- Angular动态注册组件(controller,service...)
- angularjs 指令(directive)详解(1)
- angularjs 指令(directive)详解(1)