jQuery的文檔準備回調之前稱爲AngularJS控制器

我有兩個角1.x的控制器，並與如下被初始化文件上準備外部開源庫，jQuery的文檔準備回調之前稱爲AngularJS控制器

$(function() { 
    $.support.x = 10; 
});

所以排序，其中我加載JS文件 1角框架 2.這種外部OS庫 3.我AngularJS控制器

一旦我加載頁面，開源庫的document.ready(jquery)是沒有得到所謂的第一次，而控制是要AngularJS控制器結構首先。控制器執行完成後，僅調用document.ready(jquery)。

我在這裏簡化了上下文，但在控制器之前還有其他JavaScript文件。我所懷疑的是，

爲什麼控制器首先被加載？
它與我的JS文件的排序有關嗎？
AngularJS首先加載其他document.ready(jquery)方法其他JS庫嗎？

在此先感謝。

來源

2017-06-09 Chaitanya

你爲什麼要前角加載它？ – ziaulain

這是一個外部開源庫，其實現方式如此。它在加載時有一些實現。 – Chaitanya

你試圖加載它的角度的.run方法 – ziaulain

從docs：

AngularJS在DOMContentLoaded時自動初始化或當angular.js腳本被評估，如果在那個時候 document.readyState設置爲complete。

所以：

1）我認爲這是因爲angular.js劇本要早任何$(document).ready(function(){});處理程序和angularjs該處理器被解僱前開始引導;

2）是的。看看這兩個例子（差別只在angular.js腳本放置）：

angular.module('myApp', []) 
 
.controller('MyCtrl', ['$scope', '$timeout', function MyCtrl($scope, $timeout) { 
 
    var ctrl = this; 
 
    console.log('ctrl'); 
 
    return ctrl; 
 
}]);

<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl as $ctrl"> 
 
    </div> 
 
</div> 
 

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    console.log('doc'); 
 
}); 
 
</script> 
 
<script src="//code.angularjs.org/1.6.2/angular.js"></script>

和：

angular.module('myApp', []) 
 
.controller('MyCtrl', ['$scope', '$timeout', function MyCtrl($scope, $timeout) { 
 
    var ctrl = this; 
 
    console.log('ctrl'); 
 
    return ctrl; 
 
}]);

<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl as $ctrl"> 
 
    </div> 
 
</div> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.angularjs.org/1.6.2/angular.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    console.log('doc'); 
 
}); 
 
</script>

對於第一一個輸出將是doc-ctrl併爲第二個ctrl-doc。

3）默認情況下，按照報價中所述進行加載。但是您可以使用manual initialization來控制過程。沒有當包括angular.js劇本的事情，輸出順序將是doc - stuff.loaded -> do bootstrap - ctrl

angular.module('myApp', []) 
 
.controller('MyCtrl', ['$scope', '$timeout', function MyCtrl($scope, $timeout) { 
 
    var ctrl = this; 
 
    console.log('ctrl'); 
 
    return ctrl; 
 
}]);

<div> 
 
    <div ng-controller="MyCtrl as $ctrl"> 
 
    </div> 
 
</div> 
 

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.angularjs.org/1.6.2/angular.js"></script> 
 

 
<script> 
 
$(document).on('stuff.loaded', function(){ 
 
    console.log("stuff.loaded -> do bootstrap"); 
 
    //manually bootstrap angularjs app 
 
    angular.element(function() { 
 
    angular.bootstrap(document, ['myApp']); 
 
    }); 
 
}); 
 
</script> 
 

 
<script> 
 
$(document).ready(function(){ 
 
    console.log('doc'); 
 
    //some your stuff here 
 
    //... 
 
    $(document).trigger('stuff.loaded'); 
 
}); 
 
</script>

來源

2017-06-09 11:20:58

現在它很清楚。基本上，它歸結爲JS文件的排序。可以說，我不能改變順序，我需要在這個外部腳本之前加載角度因爲依賴性問題。在這種情況下，我可以在角加載之前使document.ready被調用嗎？ – Chaitanya

@Chaitanya請在最後一段代碼中查看最新的答案，我試圖展示如何進行手動初始化。我在這種情況下'$（document）.ready（function（）{}）'觸發了會觸發angularjs初始化的事件。 –

您使用的是ng-app嗎？如果是這樣，你可以引導角度手動和刪除NG-應用

document.ready(function{ 
    angular.bootstrap(document, ['myApp']); 
})

然後角DOM後運行準備 angular bootstrap

來源

2017-06-09 11:15:54

因此，我必須刪除ng-App並在document.ready之後動態引導它？理想情況下，document.ready的排序不會被瀏覽器維護？ – Chaitanya

是的，或者你只是使用從jquery準備好的回調，並在那裏引導它，然後jquery是definitly準備之前角:-) –

jQuery的文檔準備回調之前稱爲AngularJS控制器

回答

相關問題