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标签进行了处理，因为它们有自动关闭标签。因为它们没有正确关闭，所以只有一个元素在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>

Working Codepen

Answer 3

创建指令作为元素正确关闭它们。他们不是自我关闭。

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

Angular仅加载第一个指令

3 个答案: