未找到 AngularJS 指令外部模板答案

【问题标题】：AngularJS Directive External Template Not Found未找到 AngularJS 指令外部模板
【发布时间】：2015-02-14 21:13:46
【问题描述】：

我正在尝试创建一组可重用的小部件，这些小部件可以在我正在制作的任何网站上使用。看起来 AngularJS 指令似乎是解决这个问题的好方法，但我在将它们与外部模板文件一起使用时遇到了麻烦。

如果我在指令中使用内联模板，它会很好地加载，但如果我使用外部模板，则会引发错误： https://docs.angularjs.org/error/$compile/tplrt?p0=bwInfoCard&p1=

这是我的测试夹具：

<!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-controller="InfoCardFixture">
        <bw-info-card title="title"></bw-info-card>
    </div>
</body>
</html>

我的关联控制器：

/// <reference path="..\..\typings\angularjs\angular.d.ts" />

angular.module('BaseWidgetFixtures', ['bwDirectives'])
    .controller('InfoCardFixture', function ($scope) {
        $scope.title = "TITLE";
    });

我的 Angular 指令：

/// <reference path="..\..\typings\angularjs\angular.d.ts" />

angular.module('bwDirectives', [])
    .directive('bwInfoCard', function () {
        return {
            restrict: 'E',
            transclude: false,
            replace: true,
            scope: { title: '=' },
            template: "bw_InfoCard_Large.html",
            ////template: '<div>' +
            ////          '     Hello World! {{title}}' +
            ////          '</div>',
        };
    })

还有我的模板文件：

<div class="bw_InfoCard">
    <div class="mainArea">
        <div class="header">
            <div class="title">Title</div>
            <div class="subTitle">SubTitle</div>
        </div>
        <img src="" />
        <div class="dataArea">
            <div class="dataLabel"></div>
            <div class="dataCount"></div>
        </div>
    </div>
    <div class="stateArea">
        <div class="stateLabel"></div>
    </div>
    <div class="actionsArea">
        <div class="actionButton"></div>
        <div class="actionButton"></div>
        <div class="actionButton"></div>
    </div>
</div>

它们都在同一个文件夹中。我直接从我的硬盘加载夹具 HTML 文件。 Chrome 中的网络选项卡显示所有正在正确下载的文件，除了模板文件（根本不显示）。

我一直在努力解决这个问题太久了；它应该很简单，但可惜我在某处犯了一些错误。有人看到我的错误吗？

谢谢。

哎呀；部分原因是我有一个错字。我在指令中使用了“template”而不是“templateUrl”，但它仍然抛出这个错误：

XMLHttpRequest cannot load file:///C:/Projects/Shared/Base.Directives/Widgets/InfoCard/bw_InfoCard_Large.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

看起来文件需要从网络服务器提供；不是直接从浏览器加载，但是由于没有 web.config 文件，IIS express 并不满意。

HTTP Error 500.19 - Internal Server Error
The requested page cannot be accessed because the related configuration data for the page is invalid.

也许我应该使用真正的 IIS 来创建一个指向该文件夹的站点？

【问题讨论】：

仅供参考：我接下来的步骤将包括将所有模板合并到一个文件中，该文件将被发送到客户端，以便在初始页面加载时减少 http 请求。我更喜欢走这条路的解决方案。
文件必须由网络服务器托管，因为您提到您使用 IIS，我假设您在 .NET 设置中使用角度。一种不同的方法可能是暂时使用 Grunt 来确定问题是否仅与 IIS 相关（我认为这是因为您的指令在编辑后应该是正确的）。

标签： javascript angularjs templates angularjs-directive

【解决方案1】：

是的，我一切正常。注意事项：

模板应引用为“templateUrl:”而不是“template:”
您需要在 IIS 中托管（请务必启用其他您需要的东西，例如 Windows 功能中的静态文件内容；我还启用了目录浏览，以便于查找）

【讨论】：