动态引导 AngularJS 应用程序

16 浏览
0 Comments

动态引导 AngularJS 应用程序

我在引导angularjs应用程序时遇到了问题 - 在控制器中的初始化代码。简化的测试案例如下（index.js）：

var myApp = angular.module('myApp', []);
myApp.controller('myAppController', ['$scope', function($scope) {
    console.log('从未显示');
    $scope.test = '构造函数被调用';
    // 删除更多的初始化代码
}]);
$(document).ready(function() {
    angular.bootstrap(document, ['myApp']);
    console.log('引导完成。');
});

这个测试案例的HTML文件：



    
        
        测试
    
    
        {{test}}

结果是控制台输出只显示“引导完成”，控制器函数从未被调用。这让我有点困惑，但这是我的第一个angular 1.2应用程序。如果我在< body>标签中放置ng-app="myApp"并让angular自动引导应用程序，我会得到相同的结果。

0

2 答案

0 Comments

问题原因：angular.bootstrap方法的第一个参数需要传入一个元素，但是目前传入的是document，而document并不是一个元素。

解决方法：尝试使用以下代码替换原有的代码：

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

或者

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

参考链接：stackoverflow.com/questions/16537783

然而，这些尝试并没有帮助- 但当我在标签上添加了ng-controller="myAppController"时，一切开始正常工作了。

0
0 Comments

问题的原因是在标记中没有设置ng-controller，并且脚本标记没有放在标记中或者在标记之后。

解决方法是在标记上设置ng-controller，并且将脚本标记放在标记中或者在标记之后。

关于ng-app和ng-controller的作用，应该重新查看文档，因为每个示例中都有ng-controller。bootstrap仅仅设置了ng-app。

脚本标记的放置位置在这种特殊情况下似乎是有影响的。了解每天新的东西！

参考链接：stackoverflow.com/questions/16537783/…

0