Я пытаюсь создать набор многоразовых виджетов, которые можно использовать с любого сайта, который я создаю. Похоже, что директивы AngularJS являются хорошим подходом к этой проблеме, но у меня возникают проблемы с их использованием с внешними файлами шаблонов.Внешние шаблоны AngularJS не найдены
Если я использую шаблон инлайн директиве он загружает только штраф, но если я использую внешний шаблон он выдает ошибку: https://docs.angularjs.org/error/ $ обобщит/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";
});
Моя Угловая директива:
/// <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; частью этого было то, что у меня была опечатка. Я использовал «шаблон» в директиве вместо «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.
выглядит как файлы должны быть вместо этого подается с веб-сервера; не загружается непосредственно из браузера, но, увы, IIS express недоволен из-за отсутствия файла web.config.
HTTP Error 500.19 - Internal Server Error
The requested page cannot be accessed because the related configuration data for the page is invalid.
Возможно, я должен использовать реальный IIS для создания сайта, указывающего на эту папку?
FYI: Мои следующие шаги включают объединение всех шаблонов в один файл, который отправляется клиенту, чтобы на странице было меньше HTTP-запроса нагрузки. Я предпочитаю решение, которое идет по этому пути. – bashirs
Файлы должны размещаться на веб-сервере, так как вы упомянули, что используете IIS. Я предполагаю, что вы используете угловое значение в настройках .NET. Другой подход может заключаться в том, чтобы кратковременно использовать Grunt, чтобы выяснить, связана ли проблема только с IIS (что я предполагаю, потому что ваша директива должна быть правильной после ваших изменений). – Bricktop