CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
codeMagic
codeMagic

Reputation: 44571

templateUrl not loading when creating custom directive

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.

Upvotes: 1

Views: 59

Answers (2)

Muhammad Reda
Muhammad Reda

Reputation: 27053

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.

Upvotes: 3

Manube
Manube

Reputation: 5242

st-nav-dir

in html may help.

stNavDir is the corresponding directive definition name.

Here is an interesting article:

Naming a directive

Upvotes: 2

Related Questions