Question

我希望在单个文件中包含所有指令模板，以减少加载指令繁重页面所需的HTTP请求数。

我有这个指令

angular.module('bwDirectives', [])
    .directive('bwInfoCard', function () {
        return {
            restrict: 'E',
            transclude: false,
            replace: true,
            scope: { title: '=' },
            templateUrl: "one-template",
        };
    })

如果我像这样在线指定模板，那么它会正确加载指令模板：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Directive Test Fixture</title>
    <link rel="stylesheet" href="../Style.css" type="text/css" />
    <script src="../../../Libraries/angular.min.js"></script>
    <script src="../Widget.js"></script>
    <script src="./Fixture.js"></script>
</head>
<body ng-app="BaseWidgetFixtures">
    <h1>Base Info Card</h1>
    <script type="text/ng-template" id="one-template">
        <div>This is first template</div>
    </script>
    <script type="text/ng-template" id="two-template">
        <div>This is second template</div>
    </script>
    <div ng-controller="InfoCardFixture">
        <bw-info-card title="title"></bw-info-card>
    </div>
</body>
</html>

如果我尝试通过NgInclude包含模板，则会失败。我想它会在做NgInclude之前尝试加载指令的模板（即使它在文件的前面）。正确的脚本标记将包含在页面中。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Directive Test Fixture</title>
    <link rel="stylesheet" href="../Style.css" type="text/css" />
    <script src="../../../Libraries/angular.min.js"></script>
    <script src="../Widget.js"></script>
    <script src="./Fixture.js"></script>
</head>
<body ng-app="BaseWidgetFixtures">
    <h1>Base Info Card</h1>
    <div ng-include src="'templates.html'"></div>
    <div ng-controller="InfoCardFixture">
        <bw-info-card title="title"></bw-info-card>
    </div>
</body>
</html>

是否有我遗漏的东西或者你不能使用NgInclude模板与指令一起使用？

感谢。

Answer 1

看看这个讨论Pete Bacon Darwin解释指令链接/编译顺序的地方。 https://groups.google.com/forum/#!topic/angular/3HsNz4ncnYA/discussion。您可以重新排列您的html以使其正常工作，但这并不是ng-include的意思。如果您不想使用AJAX加载模板，我建议您使用angular-templatecache之类的内容。

使用Ng Include加载AngularJS组合指令模板

1 个答案: