The angular directive causes the rest of the template to not receive rendering - what are the possible reasons this could happen?

Question

When I add my custom directive to a template for one of my existing pages that previously displayed correctly, only that directive is displayed, and the rest of the template does not work.

Examination of console logs as well as Batarang shows that the controller is complete. However, checking the DOM rendering shows that none of the remaining template elements were displayed.

Interestingly, when I insert this directive at the bottom of the template, and not at the top right, as I did earlier, the original template really gets the visualization again, and the directive is navTabsat the bottom.

• What are the possible reasons for this?
• Is there anything in particular that I can explore or push?

---

Full information:

I am adding <nav-tabs />to an existing template.

Directive, navTabs.js

   /* In charge of the navigation within the app */
    '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;
            }
        };
    });

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):

Interestingly, I found that using this directive like this:

<nav-tabs />

... causes this strange behavior, whereas using this form:

<nav-tabs></nav-tabs>

It behaves as expected when placed at the top of the template. When placed at the bottom of the template, it does not matter which form is used.

---

Update (20140220):

An issue with angular on github has been raised, see their answer: github.com/angular/angular.js/issues/6360

Answer 1

" void" , github.

• : <my-directive></my-directive>
• : <my-directive />

HTH -, .

Answer 2

var App = angular.module('app');

var App = angular.module('app',[]);