Question

在下面的例子中，为什么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>"
            }
        })
    });
});

app.js

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

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

Hello World!
should be replaced

所以Angular已初始化为{{'World'}}编译为World，但'example'指令失败，因为'should be replace'尚未被'替换'取代

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

例如

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

给出错误

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

Answer 1

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

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

带有RequireJS的AngularJS，手动初始化，指令失败

1 个答案: