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

Question

I want to include all of my directive templates within a single file to reduce the number of HTTP requests required to load a directive heavy page. 我想将所有指令模板都包含在一个文件中，以减少加载指令繁重页面所需的HTTP请求数量。

I have this directive 我有这个指令

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

If I specify the templates in-line like this then it loads the directive template properly: 如果我像这样以内联方式指定模板，则它将正确加载指令模板：

<!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>

If I try to include the templates via NgInclude it however fails. 如果我尝试通过NgInclude包含模板，则会失败。 I guess it tries to load the template for the directives before doing NgInclude (even though it is earlier in the file). 我猜想它会在执行NgInclude之前尝试为指令加载模板（即使它在文件中更早）。 The correct script tags are getting included on the page. 页面上将包含正确的脚本标签。

<!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>

Is there something that I am missing or can you not NgInclude templates for use with directives? 是否有我缺少的东西，或者您是否可以将NgInclude模板与指令一起使用？

Thanks. 谢谢。

Answer 1

Take a look at this discussing where Pete Bacon Darwin explains the order that directives are linked/compiled. 看一下这个讨论，Pete Bacon Darwin在其中解释了指令链接/编译的顺序。 https://groups.google.com/forum/#!topic/angular/3HsNz4ncnYA/discussion . https://groups.google.com/forum/#!topic/angular/3HsNz4ncnYA/discussion 。 You could probably rearange your html to get this working but this is not really what ng-include was meant to do. 您可能可以重新排列html来使其正常工作，但这并不是ng-include真正要做的。 I'd recommend using something like angular-templatecache if you don't want to load your templates with AJAX. 如果您不想用AJAX加载模板，我建议使用诸如angular-templatecache之类的东西。

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

问题描述

1 个解决方案

解决方案1
0 2015-02-14 23:47:37

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

问题描述

1 个解决方案

解决方案1 0 2015-02-14 23:47:37

解决方案1
0 2015-02-14 23:47:37