AngularJS自定义指令templateURL

Question

Working on creating my first custom directive in AngularJS, but am having some problems when using the templateURL parameter; it doesn't actually request the page that I am attempting to call.

When I use the plain template parameter, it works as expected though. I think that maybe my path being used in the templateURL may be incorrect??

This is my HTML in my main page:

<div class="container" ng-controller="formFields">
    <p>{{person.name}}</p>
    <div ng-sparkline person="person"></div>
</div>

Here is my custom directive:

myApp.directive('ngSparkline', function() {
  return {
    replace: true,
    restrict: 'EA',
    scope: {
        person: '='
    },
    //template: '<p class="lead">Hi, {{person.name}}!</p>'
      templateURL: '/js/directives/formFields.html'
  }
});

Here is my formFields.html file:

<p class="lead">Hey, {{person.name}}</p>

This is how my app directory is laid out: My directives.js file is located in the js directory, while the formFields.html file is located in /js/directives/...

Answer 1

For one, you have miscased templateUrl as templateURL . If this does not fix your problem, it might be because of the absolute URL.

Are you serving the file via a server or did you open it in a browser via the disk?

If your link is file://C://www/html/js/directives , the absolute path /js/directives targets file://C:/js/directives , where no template code lies, obviously. In that case you need to use relative paths.

Answer 2

You've got a spelling(case) mistake. templateUrl , not templateURL