templateUrl not loading when creating custom directive

Question

I'm learning how to create directives because they seem very useful and I thought it would be a good use for a top navigation bar. I'm not sure if I'm misunderstanding how they should be used, missed something small along the way or something entirely different.

The templateUrl isn't loading and looking through other posts and the docs, I can't see what went wrong.

Here is the directive

.directive('stNavDir', function() {
  return {
      restrict: 'E',
      transclude: true,
      templateUrl: 'partials/TopNav.html',
      scope: {
          siteName: "=",
      },
      link: function(scope, element, attrbiutes) {
        element.addClass('topBar');  
      }
  }

Using it in index.html

<body>
    <st-NavDir site-name={{siteName}}>{{title}}</st-NavDir>

TopNav.html

<div>
    <button>Menu</button>
    </br>
    <div > 
        This will hold the navigation with a menu button, title of current location in app, and maybe other things
     </div>
</div>

So it only shows the value of {{title}} and, looking in the console, there are no errors and it doesn't seem to even load TopNav.html.

If I'm using it completely wrong or there's a better way, I'm all ears as well. But this seemed like a good place to try out using a directive. I can load it fine using ng-include but I wanted to try this way and see if it would be more effective.

I'm also having trouble getting the style to take but that may be caused by this initial problem.

@MikkoViitala yep, thanks! I need to start walking away from the computer more often I guess. :/ — codeMagic
– codeMagic, Commented Feb 25, 2015 at 15:45
No, sometimes you just need another pair of eyes to spot the obvious. — Mikko Viitala
– Mikko Viitala, Commented Feb 25, 2015 at 15:46

Muhammad Reda · Accepted Answer · 2015-02-25 15:59:18Z

3

Change this line

<st-NavDir site-name={{siteName}}>{{title}}</st-NavDir>

to

<st-nav-dir site-name={{siteName}}>{{title}}</st-nav-dir>

Camel-case should be converted to snake-case.

edited Feb 25, 2015 at 15:59

answered Feb 25, 2015 at 15:41

Muhammad Reda

27.1k14 gold badges100 silver badges107 bronze badges

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

1 Comment

codeMagic Over a year ago

geez, of course! I read that in the docs and did it correctly with site-name. Thanks!

Manube · Accepted Answer · 2015-02-25 15:50:32Z

2

st-nav-dir

in html may help.

stNavDir is the corresponding directive definition name.

Here is an interesting article:

Naming a directive

edited Feb 25, 2015 at 15:50

answered Feb 25, 2015 at 15:42

Manube

5,2294 gold badges38 silver badges61 bronze badges

Collectives™ on Stack Overflow

templateUrl not loading when creating custom directive

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related