使用NgInclude加载AngularJS组合指令模板

Loading AngularJS combined directive templates with NgInclude

本文关键字：指令 组合 AngularJS NgInclude 加载 使用      更新时间：2023-11-14

我想在一个文件中包含所有指令模板，以减少加载指令密集页面所需的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模板与指令一起使用吗？

谢谢。

看看Pete Bacon Darwin在这里解释指令链接/编译的顺序的讨论。https://groups.google.com/forum/#！主题/角度/3HsNz4ncnYA/讨论。你可能会重新调整你的html以使其工作，但这并不是ng-include真正想要做的。如果你不想用AJAX加载你的模板，我建议你使用像angular templatecache这样的东西。

相关文章：