動態引導AngularJS應用程序

我在使用控制器中的初始化代碼boostrapping angularjs應用程序時遇到問題。簡化的測試案例是這樣的（index.js）：動態引導AngularJS應用程序

var myApp = angular.module('myApp', []); 

myApp.controller('myAppController', [ '$scope', function($scope) { 
    console.log('never shown'); 
    $scope.test = 'constructor called'; 
    // removed more init code 
}]); 

$(document).ready(function(){ 
    angular.bootstrap(document, ['myApp']); 
    console.log('Finished boostrapping.'); 
});

這個測試用例的HTML文件：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>TeST</title> 
    </head> 
    <body> 
     {{test}} 
     <script type="text/javascript" src="js/bower_components/jquery/dist/jquery.min.js"></script> 
     <script type="text/javascript" src="js/bower_components/angular/angular.js"></script> 
     <script type="text/javascript" src="js/index.js"></script> 
    </body> 
</html>

結果是控制檯輸出只是說「完了引導」 - 並且從不調用控制器功能。 ..這讓我有點困惑，但這是我第一個角度爲1.2的應用程序。我得到相同的結果如果我把ng-app =「myApp」放在標籤中並讓角度自動引導應用程序。 ...

來源

2014-02-22 Mr MT

您從未在您的標記中的任何位置設置ng-controller。

另外，你應該把你的腳本標籤放在頭部，或者在</body>之後。

編輯：當以這種方式使用引導程序時，<script>標籤的位置很重要。

來源

2014-02-22 18:16:35 thescientist

嗯不，我不設置控制器 - 但這是整點 - 應用程序將在頁面加載後一段時間動態提升。控制器應該設置.controller（..）調用。我檢查了docs.angularjs.org上的http://docs.angularjs.org/guide/controller文檔 - 他們的例子與我的似乎很相似.. –

@MrMT ng-app與ng-controller完全不同確實。您應該再次查看該鏈接中的文檔，因爲每個案例都有示例中的ng-controller。 bootstrap只是設置ng-app。 – thescientist

...如果腳本位於，它應該有所作爲。我只是加倍檢查確定 - 沒有區別...但是你是100％正確的，如果我把ng控制器放在那麼一切實際上都有效:)謝謝你！ –

angular.bootstrap方法的第一個參數是一個元素。目前您正在傳遞文檔，而不是元素。

Try 
    angular.bootstrap(document.documentElement, ['myApp']); 
or 
    angular.bootstrap(document.body, ['myApp']);

來源

2014-02-22 18:28:03

這應該不是一個問題http://stackoverflow.com/questions/16537783/which-method-should-i-use-to-manually-bootstrap-my-angularjs – thescientist

那麼，這沒有幫助 - 但是當我把ng-controller =「myAppController」放在上時，一切都開始工作。 –

動態引導AngularJS應用程序

回答

相關問題