Currently, I am delving into the world of directives as they appear to be quite advantageous. My intention was to implement a directive for a top navigation bar. However, I find myself perplexed as the templateUrl fails to load. Despite scouring through various online resources and documentation, I cannot seem to pinpoint the issue.
This is the implementation of the directive:
.directive('stNavDir', function() {
return {
restrict: 'E',
transclude: true,
templateUrl: 'partials/TopNav.html',
scope: {
siteName: "=",
},
link: function(scope, element, attributes) {
element.addClass('topBar');
}
}
Utilizing it in index.html:
<body>
<st-NavDir site-name={{siteName}}>{{title}}</st-NavDir>
Content of 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>
Currently, only the value of {{title}} is displayed. Furthermore, there are no apparent errors in the console and TopNav.html does not load at all.
If my approach is incorrect or if there exists a more efficient method, I am open to suggestions. Nevertheless, using a directive seemed like an ideal choice for experimentation. Although I can effectively load it using ng-include, I wanted to explore this approach to evaluate its effectiveness.
Additionally, I am encountering difficulties in applying styles, which could potentially stem from this initial setback.