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

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 只加载第一个指令

Angular only loads first directive

javascript

directive

angularjs

angularjs-directive