Question

我之前问了一个关于How to populate a select dropdow

的问题

当我试图实现这个时：

<html lang="en" class="light" data-ng-app="test">
<body data-ng-controller="TestCtrl">
...

    <script type="text/javascript">
        $(document).ready(function () {
            angular.module('test', []).controller('TestCtrl', function ($scope, $http) {
                $scope.selectedTestAccount = null;
                $scope.testAccounts = [];

                $http({
                    method: 'GET',
                    url: '/Admin/GetTestAccounts',
                    data: { applicationId: 3 }
                }).success(function (result) {
                    $scope.testAccounts = result;
                });
            });
        });
    </script>

但它在Chrome开发者工具中给出了一个错误：

Uncaught Error: No module: test

我注意到回复帖子的人提到我需要确保Angular在我的HTML上运行并且模块已加载。好吧，我确实在脚本区域中包含了Angular，但我仍然得到了上述消息。任何人都可以告诉我我可能做错了什么。

Answer 1

当您将ngApp置于module声明之上时，很明显，angular尝试在声明之前启动module 。

您有两种选择：

将模块声明放到head，因此当ngApp指令尝试初始化时它就会准备就绪。

使用angular.bootstrap手动初始化您的应用程序。

手动初始化：

angular.bootstrap(angular.element("body")[0], ["test"]);

文档：
http://docs.angularjs.org/api/angular.bootstrap

Answer 2

使用指令。不要以这种方式使用jQuery。这是我从强大的jQuery背景角度开始时的第一个（和主要）错误。

如果需要操作dom元素，在大多数情况下，正确的方法是指令

http://docs.angularjs.org/guide/directive

如何确保AngularJS在我的HTML上运行并且模块已加载？

2 个答案:

手动初始化：