Geek Answers Handbook

Angular only loads the first directive

I declared two directives as 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 after this template, only the first will load. Can someone explain to me why?

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

+4
source share
3 answers

Tags are not closed correctly. As a result, Angular cannot parse the directives correctly. HTML fixed:

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

Please note that custom elements require closing tags; they are not self-closing.

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

+3
source

html <ativ-history-list/><ativ-history-list/>, , html, , . , UI, .

/, <area />, <base />, <br /> , <col />, <command /> , <embed />, <hr /> , <img />, <input /> , <keygen />, <link />, <meta />, <param /> <source />, <track />, <wbr /> ..

, ,

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

Codepen

+2

. .

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

More articles:


All Articles