AngularJS: Directive repetition, works as attribute but not as element

Question

If I write twice the same directive as attribute, I get twice the result, but when I write it twice as element, I only get the result once, why?

I have a very simple directive:

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

An $scope with a collection of items:

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

Therefore, when doing this:

<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>

I would expect to get the collection rendered twice in each container, but in the second container only happens once. Why does this happen?

I have created an runable example with the problem: http://jsfiddle.net/vtortola/mzAPk/

Cheers.

It works if you don't use the XML-style self-closing tag (i.e. change it to ``) — Daniel Beck, Jul 10 '14 at 17:14
Right right :D Do you want to put that as answer and I will mark it? — vtortola, Jul 10 '14 at 17:16
@DanielBeck is right. You're probably in HTML5: http://stackoverflow.com/a/3558200/2057033. Don't use the `` syntax, except for the void elements. — Blackhole, Jul 10 '14 at 17:17

score 2 · Accepted Answer · edited May 23 '17 at 11:50

2

See Are (non-void) self-closing tags valid in HTML5? This

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

should be

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

edited May 23 '17 at 11:50

Community

1
1

answered Jul 10 '14 at 17:19

Daniel Beck

20,653
5
38
53

AngularJS: Directive repetition, works as attribute but not as element

1 Answers1