Question

我在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内部声明指向somwhere globaly，因为它没有在那里使用。这个要求是否可以优雅地实现？

Answer 1

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

要做到这一点，实际上非常复杂。我创建了以下库，可以帮助您入门：

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

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

要求模板指令

1 个答案: