要求模板上的指令答案

【问题标题】：Require directive on template要求模板上的指令
【发布时间】：2014-01-13 18:20:25
【问题描述】：

我在我的 Angular 应用程序中使用 RequireJS。我想require我的pill它实际使用的地方。

pill.js

define([], function() {
    angular.module('app').directive('pill', function() {
        return function(a,b,c) {
            b.html("A pill");
        };
    });
});

incl.html

<div load-script="require(['pill']);"></div>
<div pill>test</div>

main.html

<html ng-app="app">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
        <script src="http://requirejs.org/docs/release/2.1.10/comments/require.js"></script>
    </head>
    <body>
        <script>
            var app = angular.module("app", [])
                app.directive('loadScript', function() {
                        return {
                            link: function(scope, element, attrs) {
                                (new Function(attrs.loadScript))();
                            }
                        };
                    }
                );
        </script>
    <div ng-include="'incl.html'"></div>
    </body>
</html>

这个简短的示例应该声明一个 pill 指令，该指令只是将 test 中的文本转换为 A pill 在 incl.html 文件中。但是，它不起作用。我猜是因为pill 指令是在编译incl.html 之后注册的。

我想避免在全局范围内声明指令，例如在 main.html 内，因为它没有在那里使用。能否以优雅的方式实现这一要求？

【问题讨论】：

标签： javascript angularjs requirejs angularjs-directive angularjs-ng-include

【解决方案1】：

按需加载directive 的最佳方式是使用$compileProvider 创建它，您需要在app.config 阶段对其进行缓存。另外，我建议您在加载使用它的局部视图时加载您需要的directive，而不是使用ng-include。

要做到这一点，它实际上是相当复杂的。我创建了以下库，应该可以帮助您入门：

http://marcoslin.github.io/angularAMD/

angularAMD 将使您更轻松地创建一个独立文件，该文件允许您配置 RequireJS 依赖项以仅在需要它的部分上加载 directive。

【讨论】：