bas*_*irs 1 javascript templates angularjs angularjs-directive
我正在尝试创建一组可重用的小部件,可以在我正在制作的任何网站上使用.似乎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中的网络标签显示除模板文件(根本未显示)之外正确下载的所有文件.
我一直在敲打这个问题太久了; 它应该很简单但是我在某个地方犯了一些错误.有人看到我的错误吗？
谢谢.
Woops; 部分原因是我有一个错字.我在指令中使用"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服务器提供文件; 没有直接从浏览器加载,但由于没有web.config文件,IIS表示不满意.
HTTP Error 500.19 - Internal Server Error
The requested page cannot be accessed because the related configuration data for the page is invalid.
也许我应该使用真正的IIS来创建指向该文件夹的站点？
是的,我把它全部搞定了.注意事项: