Угловое загружает только первая директива

Question

Я объявил две директивы по следующей схеме конструкции:

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

Если добавить две директивы после этой модели, только первый один загружается. Может кто-нибудь объяснить мне почему?

Код сниппета: http://codepen.io/anon/pen/doYKap

Answer 1

Ваши теги не закрыта. В результате Angular не может правильно разобрать директивы. Исправлен HTML:

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

Обратите внимание, что пользовательские элементы требуют закрытия тегов, они не являются самозакрывающимися.

Демо:http://codepen.io/anon/pen/JdYZqG

Answer 2

В настоящее время ваш HTML имеет <ativ-history-list/><ativ-history-list/>, который, кажется, не так, вы обращались эти HTML-теги, поскольку они имеют закрывающиеся теги. Поскольку они не закрыты должным образом, только один элемент получает рендеринг на втором элементе пользовательского интерфейса, который игнорируется.

элементы тег не должен быть закрыт с помощью /, если элементы не похожи <area />, <base />, <br /> , <col />, <command /> , <embed />, <hr /> , <img />, <input /> , <keygen />, <link />, <meta />, <param /> <source /> , <track />, <wbr />, и т.д.

Customize созданный элемент для директивы должны были правильно

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

Working Codepen

Answer 3

закрыто При создании директивы, как элементы закрыть их должным образом. Они не закрываются сами собой.

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