ng repeat with directive inside

http://angularjs.org/

by John Harley

HTML

<script type="text/ng-template" id="MyDirective.html">
    <div id="directive">
        DIRECTIVE<br />
        value: <b>{{ value }}</b>
        <div ng-transclude></div>
    </div>
</script>

<span ng-controller="Parent">
    <ul>
        
        <!-- "value" doesn't evaluate inside of ng-repeat -->
        <li ng-repeat="class in classes"> 
            <my-directive
                class="{{ $parent.class }}"
                value="{{ class }}">
                    {{ class }}
            </my-directive>
        </li>
        
        <!-- "value" evaluates successfully outside of ng-repeat -->
        <li>
            <my-directive
                class="{{ $parent.four }}"
                value="{{ four }}">
                    {{ four }}
            </my-directive>
        </li>

    </ul>
</span>

CSS

div { padding: 10px; margin: 3px; border: 2px solid #ccc; }
b { font-size: 19px }
.one { background-color: pink }
.two { background-color: yellow }
.three { background-color: lightblue }
.four { background-color: lightgreen }

JavaScript

var myModule = angular.module( 'myApp',[] );

function Parent( $scope )
{    
    $scope.classes = ['one', 'two', 'three'];
    $scope.four = 'four';
}

function MyDirective( $scope ){}
        
myModule.directive('myDirective', function()
{
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            value: '@'
        },
        templateUrl: 'MyDirective.html',
        controller: 'MyDirective',
    }
});