Angular directive templateURL not being loaded. Wh

Question

I've created a directive in Angular. The directive 'compiles' when I use the template attribute. It doesn't compile in when using templateURL.

The templateURL file doesn't 404 in angular page's console or network tab. It is 200 as a browser URL.

What am I missing?

'use strict';

angular.module('mean.profile').directive('inProfileSidebar', function() {
  return {
    restrict: 'A',
    scope: {
      data: '=',
      editable: '=',
    },
    template: '<div><h2>inProfileNarrow</h2><div>{{data}}</div><div>{{editable}}</div></div>',
//    templateURL: '/profile/views/inProfileSidebar.html',
  };
});

My app's URL is: http://localhost:3000/#!/profile/ This URL is 200: http://localhost:3000/profile/views/inProfileSidebar.html

inProfileSidebar.html

<div>
  <h2>inProfileNarrow</h2>
  <div>{{data}}</div>
  <div>{{editable}}</div>
</div>

Used in this HTML:

<div class="col-md-4">
  <div in-profile-sidebar data="data.profile" editable="data.profile.editable"></div>
</div>

I don't see any errors in the browser console, and there is no request to the templateURL in the browser's network log.

It works when I use template, but not with templateURL. Why?

Answer 1

I didnt test it, but from a quick look it seems you named the property incorrectly.

It should be 'templateUrl', NOT 'templateURL' (only the 'U' is uppercase).