1

在下面的示例中，为什么 AngularJS 在我的 HTML 中编译 {{'world'}} 但不执行指令？

HTML

<body>
    <div>Hello {{'World'}}!</div>
    <example>should be replaced</example>
    <script data-main="lib/main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.min.js"></script>
</body>

main.js

require.config({
    paths: {
        jquery: '//code.jquery.com/jquery-1.10.0.min',
        angular: '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min'
    },
    shim: {
        'angular' : {'exports' : 'angular'}
    },
    priority: [
        "angular"
    ]
});

require( [
    'jquery',
    'angular',
    'app'
    ], function($, angular, app) {
        'use strict';
        $(document).ready(function () {
            angular.bootstrap(document,[]);
            app.directive('example',function(){
            return {
                restrict: "E",
                template:"<div>Replaced</div>"
            }
        })
    });
});

应用程序.js

define([
    'angular'
], function (angular) {
    'use strict';
    return angular.module('myApp', []);
});

运行时在浏览器窗口中可见

Hello World!
should be replaced

因此 Angular 已初始化为 {{'World'}} 已编译为 World 但“示例”指令已失败，因为“应该替换”尚未替换为“已替换”

我意识到 HTML 中没有应用程序持有者，但如果我尝试添加一个，我会收到错误

例如

<div ng-app='myApp'>
    <div>Hello {{'World'}}!</div>
    <example>should be replaced</example>
</div>

给出错误

Uncaught Error: No module: myApp    http:// ...
4

1 回答 1

5

因为您延迟/延迟加载所有模块（使用 AMD），您需要在加载完成后手动引导您的应用程序。查看http://docs.angularjs.org/guide/bootstrap的手动初始化部分，以获取执行此操作的示例。

确保在角度文档准备好之前不调用引导程序。还包括您希望在该点引导的应用程序作为引导调用的模块依赖项（例如angular.bootstrap(document, ['myapp']);）。

于 2013-05-30T21:54:33.703 回答