AngularJS Child directive is not getting called

Question

I have a nested parent - child directives, the purpose if to draw a table.. The child directive is not getting called when called from within the parent (tag). It works fine when tested independently.. I seems to have followed all the rules/syntax, require is in place.. I don't see the console logs statements I have in the child directive, also there are no errors in the log.

Directives -

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

    app.directive ('gridControl', function(tableDataFactory){

        return {

            restrict: 'E',
            scope : {},
            controller : function($scope){

                $scope.columns = [];
                $scope.column = [];

                $scope.addColumnProperties = function(columnProperties) {
                    console.log("In addColumnProperties "+ columnProperties);
                    $scope.column = columnProperties;                   
                    $scope.columns.push($scope.column);

                    $scope.column = [];
                }
            },

            link : function (scope, element, attrs) {

                 console.log(attrs.source);

                 tableDataFactory
                    .get(
                            'http://localhost:8000/AngularTableWidget/json/accounts.json')
                    .then(
                            function(data) {
                                scope.items = data.items;
                                console.log("In grid directive" + scope.items);
                            });
            },

            templateUrl : '../template/gridtemplate.html'
        };
    });

    //child directive...
    app.directive('tableColumn', function(){

        return{
            restrict : 'E',
            scope : {}, 
            require : '^gridControl',

            link : function(scope, element, attrs, gridCtrl) {
                console.log("In tablecolumn "+ attrs.source);
                var colProp = [];
                console.log("In tablecolumn "+ attrs.caption);
                colProp.push(attrs.caption);
                colProp.push(attrs.source);

                gridCtrl.addColumnProperties(colProp);
            }
        };
    });

HTML -

<div>

<grid-control source="gridtable.json">  

 <table-column caption="Name" source="name"> </table-column>
 <table-column caption="Account" source="account"> </table-column>

 </grid-control>

template -

<div>

 <table>
 <tbody ng-repeat="row in items track by $index">
  <tr ng-repeat ="col in columns">
    <td>
    Test
    </td>
  </tr>  
  </tbody>
 </table>

</div>

Answer 1

On grid-control directive, add transclude = true. Inside the grid-control template, add ng-transclude where ever the child directive going to be inserted. Without using transclude, the system will ignore the child directive.

I hope this helps.

Austin