Grandchild directives

by Fernando Araujo

HTML

<div ng-app="app">
    <div class="parent" ng-controller="MainCtrl" ng-init="find()">
        <p>
            Steps: {{ myStepList }}             
        </p>
        
        <p>
            Items: {{ myItemList }}             
        </p>
        
        <p>
            Types: {{ myTypeList }}
        </p>
        
        <hr />
        
        <div>
            Directives with ng-repeat:
            
            <div ng-repeat="step in myStepList">                                
                <my-step-directive a-fn="testfn()" 
                                   my-item-list="myItemList" 
                                   my-type-list='myTypeList'
                                   step="step" />
            </div>
        </div>
        
        <div>
            Test: <button ng-click="testfn()">Run (MainCtrl)</button>
        </div>
    </div>
</div>

CSS

.parent {
    border: 20px solid #676767;
    padding : 20px;
}
.parent, .directive {
    position: relative;
}
.parent:after, .directive:after {
    display: inline;
    color: #fff;
    font-size: normal;
    position: absolute;
    top:-20px;
    left:-20px;
    z-index: 100;
    padding: 1px 5px;
    background-color: rgba(0, 0, 0, 0.5);
}
.parent:after {
    content:"MainCtrl Scope";
}
.directive {
    padding: 20px;
    border: 20px solid #cbccdd;
    margin-top: 20px;
}
.directive:after {
    content:"Directive Scope"
}
.line {
    border-bottom: 1px dotted #ccc;
    padding: 5px 0;
}

JavaScript

var app = angular.module("app", []);

app.controller("MainCtrl", [
    '$scope', '$log', 'MyStepListAPI', 'MyTypeListAPI', 'MyItemListAPI'

, function ($scope, $log, MyStepListAPI, MyTypeListAPI, MyItemListAPI) {
    var init = function () {
        $scope.myStepList = [];
        $scope.myItemList = [];
        $scope.myTypeList = [];
    };

    $scope.testfn = function () {
        $log.debug('Test did start. Okay!');
    };

    $scope.find = function () {
        MyStepListAPI.list(function (data) {
            $scope.myStepList = data;
        });

        MyItemListAPI.list(function (data) {
            $scope.myItemList = data;
        });

        MyTypeListAPI.list(function (data) {
            $scope.myTypeList = data;
        });
    };

    init();
}]);

app.factory('MyStepListAPI', [function () {
    return {
        list: function (nxt) {
            nxt([{
                id: 1,
                name: 'Step one'
            }, {
                id: 2,
                name: 'Step two'
            }]);
        }
    };
}]);

app.factory('MyItemListAPI', [function () {
    return {
        list: function (nxt) {
            nxt([{
                id: 1,
                name: 'Item A'
            }, {
                id: 2,
                name: 'Item B'
            }, {
                id: 3,
                name: 'Item C'
            }]);
        }
    };
}]);


app.factory('MyTypeListAPI', [function () {
    return {
        list: function (nxt) {
            nxt([{
                id: 1,
                name: 'Type one'
            }, {
                id: 2,
                name: 'Type two'
            }]);
        }
    };
}]);

app.directive('myStepDirective', function () {
    return {
        restrict: 'E',
        scope: {
            aFn: '&',
            myItemList: '=',
            myTypeList: '=',
            step: '='
        },
        link: function (scope, element, attrs) {
            console.log(scope);
        },
        template:...