javascript - AngularJS:指令重复，作为属性而不是元素

Question

如果我将相同的指令写两次作为属性，我得到两倍的结果，但是当我将它作为元素写两次时，我只得到一次结果，为什么？

我有一个非常简单的指令:

.directive("ngMyText", function(){
    return {
        restrict: 'AE'
      };
})

一个包含项目集合的$scope:

$scope.items = [
    { text:"AAA", show:true },
    { text:"BBB", show:true }
];

因此，在这样做的时候:

<div ng-controller="myController">
    <div class="container">
        <div data-ng-my-text ng-repeat="item in items | filter:{show:true}" ng-bind="item.text"></div>
        <div data-ng-my-text ng-repeat="item in items | filter:{show:true}" ng-bind="item.text"></div>
    </div>

    <div class="container">
        <ng-my-text ng-repeat="item in items | filter:{show:true}" ng-bind="item.text" />
        <ng-my-text ng-repeat="item in items | filter:{show:true}" ng-bind="item.text" />
    </div>
</div>

我希望让集合在每个容器中呈现两次，但在第二个容器中只发生一次。为什么会这样？

我创建了一个带有问题的可运行示例:http://jsfiddle.net/vtortola/mzAPk/

干杯。

Answer 1

参见 Are (non-void) self-closing tags valid in HTML5?这个

<ng-my-text ng-repeat="item in items | filter:{show:true}" 
ng-bind="item.text" />

应该是

<ng-my-text ng-repeat="item in items | filter:{show:true}" 
ng-bind="item.text"></ng-my-text>