动态引导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应用程序

回答

相关问题