CODEWITHSUNDEEP
javascriptangularjstemplatesangularjs-directive
bashirs
bashirs

Reputation: 450

AngularJS Directive External Template Not Found

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: https://docs.angularjs.org/error/$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.

Woops; part of it was that I had a typo. I used "template" in the directive instead of "templateUrl" but it still throws this error:

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.

Looks like the files need to instead be served from a web server; not loaded directly from a browser but alas IIS express is not happy due to no web.config file.

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

Perhaps I should use real IIS to create a site pointing to that folder?

Upvotes: 1

Views: 3549

Answers (1)

bashirs
bashirs

Reputation: 450

Yup I got it all working. Things to note:

  • The template should be referenced as "templateUrl:" not "template:"
  • You need to host in IIS (be sure to enable anthing else you need like static file content in Windows Features; I also enabled directory browsing to make it easier to find)

Upvotes: 5

Related Questions