(16) JQuery Ready와 angularJS controller의 실행 순서 문제

2321 단어
프로젝트에서 JQuery와 AngularJS 프레임워크를 사용했습니다. 최근에 문제를 찾았습니다. 그 이유는 JQuery Ready가 angularJS controller에 쓰기 전에 JQuery 선택기가 필요한 요소를 선택할 수 없기 때문입니다(angularJS controller가 초기화되지 않았기 때문에dom 요소의class 속성이 추가되지 않았습니다).그래서 jquery와angularjs는 누가 먼저 실행하고 누가 나중에 실행하는지에 대한 문제를 제기했다.물론 우리가 작성한 코드는 이런 순서에 의존하지 말고, 어떤 순서에 의존하는 코드가 더 easy 오류입니다.
<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와 angular JS controller는domready 이후에 실행되며, 누가 먼저 실행했는지.

좋은 웹페이지 즐겨찾기