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>

Things seem OK; are you sure this is not a usage issue, i.e. are you sure you are not using it in a "strange" way? Can you reproduce it in a fiddle? — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented May 27, 2014 at 7:28
Where do you think I could be wrong ?. accessing it like I access my other angular examples.. I will try to check it in fiddle. — Rahul
– Rahul, Commented May 27, 2014 at 7:51
I do not know, really, that is why I'd suggest you reproduced it in a fiddle. — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented May 27, 2014 at 7:54
Copying stuff into the fiddle is not helping. Try reproducing the error in an otherwise working fiddle. Start by not using the self-closing form: <table-column />, rather the full end tag: <table-column></table-column>; I have seen Angular having trouble with the former. — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented May 27, 2014 at 8:03

AustinTX · Accepted Answer · 2014-08-08 22:14:39Z

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

answered Aug 8, 2014 at 22:14

AustinTX

1,3525 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS Child directive is not getting called

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related