After adding my custom directive to a template on an existing page, I noticed that only the directive was rendering and the rest of the template was not showing up as expected.
Even though the controller seemed to have executed based on console logs and Batarang, the remaining parts of the template were missing from the rendered DOM.
An interesting observation was made - when placing the directive at the bottom of the template instead of the top, the original template was rendered along with the navTabs directive at the bottom.
- What could be causing this issue?
- Is there anything specific that I should investigate further?
Additional details:
I inserted <nav-tabs /> into the existing template.
The custom directive, navTabs.js
/* Responsible for app navigation */
'use strict';
var App = angular.module('app');
App.directive('navTabs', function() {
var tabs = [
{id:'x', title: 'Xx', url: '/x'},
{id:'y', title: 'Yy', url: '/y'}
];
return {
restrict: 'E',
templateUrl: 'views/navTabs.html',
// scope: {},
link: function(scope) {
scope.tabs = tabs;
}
};
});
The template, views/navTabs.html:
<ul class="nav nav-tabs">
<li ng-repeat="tab in tabs">
<a href="#{{tab.url}}">{{tab.title}}</a>
</li>
</ul>
Update (20140220):
Upon experimenting, it was discovered that using the directive in the form:
<nav-tabs />
resulted in unexpected behavior, whereas the form:
<nav-tabs></nav-tabs>
functioned correctly when placed at the top of the template. At the bottom of the template, the form used did not matter.
Update (20140220):
An issue was raised on Github regarding this Angular behavior. Their response can be found here: github.com/angular/angular.js/issues/6360