CODEWITHSUNDEEP
javascriptangularjsangularjs-directivedirective
ghuroo
ghuroo

Reputation: 318

Angular only loads first directive

I have declared two directives by the following design pattern:

var sampleDrtv = function () {
    return {
        restrict: 'E',
        replace: true,
        scope: false,
        templateUrl: 'app/views/partials/sample.html',
        link: function() {
            alert('sample');
        }
    }
};

angular
.module('app')
.directive('sampleDrtv', sampleDrtv);

If I add two directives following this pattern, only the first one gets loaded. Can someone explain me why?

Code Snippet: http://codepen.io/anon/pen/doYKap

Upvotes: 4

Views: 282

Answers (3)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

Currently your html has <ativ-history-list/><ativ-history-list/> which seems to be wrong, you treated those html tags as they have self closing tags. Because they are not closed properly only one element is getting render on UI second element getting neglected.

Elements tag shouldn't be closed using / unless the elements are like <area />,<base />,<br /> ,<col />,<command /> ,<embed />,<hr /> ,<img />,<input /> ,<keygen />,<link />, <meta />,<param /> <source />,<track />, <wbr />, etc.

Customize element created for directive should have been closed properly

  <ativ-history-list> </ativ-history-list>
  <ativ-history-detail></ativ-history-list>

Working Codepen

Upvotes: 2

Jagadish Dharanikota
Jagadish Dharanikota

Reputation: 263

While creating directives as elements close them properly. They are not self closing.

<div ng-app="ativ">
    <ativ-history-list></ativ-history-list>
    <ativ-history-detail></ativ-history-detail>
</div>

Upvotes: 2

dfsq
dfsq

Reputation: 193261

Your tags are not properly closed. As the result Angular can't parse directives correctly. Fixed HTML would be:

<div ng-app="ativ">
    <ativ-history-list></ativ-history-list>
    <ativ-history-detail></ativ-history-detail>
</div>

Note, that custom elements require closing tags, they are not self-closing.

Demo: http://codepen.io/anon/pen/JdYZqG

Upvotes: 3

Related Questions