I am trying to create a set of reusable widgets that can be used from any site I am making. It appears as though AngularJS directives are a good approach to this problem but I am having trouble using them with external template files.
If I use an inline template to the directive it loads just fine but if I use an external template it throws an error: http://ift.tt/1mIXjei$compile/tplrt?p0=bwInfoCard&p1=
This is my test fixture:
<!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>
My associated controller:
/// <reference path="..\..\typings\angularjs\angular.d.ts" />
angular.module('BaseWidgetFixtures', ['bwDirectives'])
.controller('InfoCardFixture', function ($scope) {
$scope.title = "TITLE";
});
My Angular directive:
/// <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>',
};
})
And my template file:
<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>
They are all in the same folder. I am loading the fixture HTML file directly from my hard drive. The network tab in Chrome shows all the files being downloaded properly except the template file (which is not shown at all).
I have been banging my head on this for too long; it should be simple but alas I am making some mistake somewhere. Does anyone see my error?
Thanks.
Aucun commentaire:
Enregistrer un commentaire