Angular嵌套指令仅渲染第一个子节点

Question

我有一个parent指令,其中包括两个子指令,first和second.我注意到只有第一个孩子被渲染.另外,如果我在第一个之前放置了一些任意的HTML标记,那么它都会被渲染,但是如果我把它们放在那之后那么它们就不会出现了.为什么是这样？

看到jsfiddle:

<!-- index.html -->
<div ng-app="myApp">
  <my-parent-dir />
</div>

<!-- main.js -->
var app = angular.module("myApp", []);
app.directive("myParentDir", function() {
    return {
        restrict: 'E',
        template: '<my-first-child /> <my-second-child />'
    };
});

app.directive("myFirstChild", function() {
    return {
        restrict: 'E',
        template: '<input type="text" placeholder="first">',
    };
});

app.directive("mySecondChild", function() {
    return {
        restrict: 'E',
        template: '<input type="text" placeholder="second">',
    };
});

Answer 1

尝试使用它像这样:

var app = angular.module("myApp", []);
app.directive("myParentDir", function() {
    return {
        restrict: 'E',
        template: '<my-first-child></my-first-child> <my-second-child></my-second-child>'
    };
});

从github中的角度问题:

html规范定义的自闭或空元素对于浏览器解析器来说非常特殊.你不能自己做,所以对于你的自定义元素你必须坚持非空元素().

这不能改变角度.