动态启动AngularJS应用程序



我在升级angularjs应用程序时遇到问题,控制器中有初始化代码。简化的测试用例如下(index.js):

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>

结果是控制台输出只显示"Finished bootstrapping",而控制器函数从未被调用。。这让我有点困惑,但这是我的第一个angular 1.2应用程序。如果我把ng app="myApp"放在标签中,让angular自动引导应用程序,我会得到同样的结果。。。

您从未在标记中的任何位置设置ng控制器。

此外,您应该将脚本标记放在头部,或者放在</body>之后。

edit:当以这种方式使用bootstrap时,<script>标签的位置很重要。

angular.bootstrap方法的第一个参数是一个元素。当前您正在传入文档,该文档不是元素。
Try 
angular.bootstrap(document.documentElement, ['myApp']);
or  
angular.bootstrap(document.body, ['myApp']);

相关内容

最新更新