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>

AngularJS：指令重复，作为属性而不作为元素

1 个答案: