AngularJS - Directive repetition

by vtortola

HTML

<div ng-app="myapp">
    <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>
        <!-- it shows the collection once if self-closing tags are used -->
        <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 class="container">
            <ng-my-text ng-repeat="item in items | filter:{show:true}" ng-bind="item.text"></ng-my-text>
            <ng-my-text ng-repeat="item in items | filter:{show:true}" ng-bind="item.text"></ng-my-text>
        </div>
    </div>
</div>

CSS

div.container{
    border:1px solid #000;
    margin:5px;
}

ng-my-text {
    display:block;
}

JavaScript

angular.module("myapp",[])
.controller("myController",function($scope){
    $scope.items = [
        { text:"AAA", show:true },
        { text:"BBB", show:true }
    ];
})
.directive("ngMyText", function(){
    return {
        restrict: 'AE'
      };
})
;