AngularJS Custom Directive 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 templateparameter, 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/...

Leon Adler · Accepted Answer · 2015-11-18 22:00:11Z

2

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.

answered Nov 18, 2015 at 22:00

Leon Adler

3,3921 gold badge33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Evan Bechtol Over a year ago

This application is hosted on a server, so I know that my filepath is correct, based on other similar constructions of relative paths in the application.

Evan Bechtol Over a year ago

The problem was the spelling mistake! Feeling dumb

HankScorpio · Accepted Answer · 2015-11-18 21:58:13Z

1

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

edited Nov 18, 2015 at 21:58

answered Nov 18, 2015 at 21:54

HankScorpio

3,65117 silver badges28 bronze badges

2 Comments

HankScorpio Over a year ago

I edited my answer. You've just mis-spelled templateUrl

Evan Bechtol Over a year ago

Thanks! Can't believe I missed that! Rookie move :)

Collectives™ on Stack Overflow

AngularJS Custom Directive templateURL

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related