javascript - Angular 只加载第一个指令

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