CODEWITHSUNDEEP
javascriptangularjstemplatesangularjs-directive
bguiz
bguiz

Reputation: 28617

angular directive causes rest of template not to get rendered - what are the possible reasons that this could happen?

When I add my custom directive to a template for one of my existing pages, which previously rendered correctly, only this directive renders, and the rest of the template does not.

Examining console logs as well as Batarang shows that the controller has been executed. An inspection of the rendered DOM, however, shows that none of the remainder of the template has been rendered.

Interestingly, when I insert this directive at the bottom of the template, instead of right at the top, as I had been doing prior, the original template does indeed get rendered once more, and the navTabs directive at the bottom.

Full details:

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

The 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;
            }
        };
    });

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

Interestingly, I have found that using the directive as so:

<nav-tabs />

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

<nav-tabs></nav-tabs>

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

Raised an issue against angular on github, see their response: github.com/angular/angular.js/issues/6360

Upvotes: 4

Views: 123

Answers (2)

bguiz
bguiz

Reputation: 28617

When including your own directive, using a "void tag" is not possible, as explained in this github issue.

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

HTH anyone else who gets snagged with this strange behaviour.

Upvotes: 2

Jinto
Jinto

Reputation: 865

change

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

to

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

Upvotes: 0

Related Questions