AngularJS - directive in another directive and communication

Question

I want to create few directives for grid view.

Finally it should looks like:

<grid-table columns="table.columns">
    <grid-table-header></grid-table-header>
    <grid-table-filters></grid-table-filters>
    <grid-table-content rows="users"></grid-table-content>
</grid-table>

So - here is one main directive - table and another, optional directives for table header(columns names), filters(searching in table), table content.

And... in main directive(table) I have "columns" field - because I want to give informations about columns and want to use this data in child directives(header, filters, content).

Is it possible?

Vikram Kumar · Accepted Answer · 2016-01-12 12:17:43Z

1

Yes you can get the data from parent directive to child directive through a controller.

angular.module('example')
   .directive('gridTable', function () {
      return {
         scope: {
           'columns': '='
        },
         controller: ['$scope', function($scope) {
            this.getColumns = function() {
               return scope.columns;
            }
         }]
      }
   });

And in Child directive:

angular.module('example')
   .directive('gridTableContent', function () {
      return {
         require: '^gridTable',
         ...
         link: function (scope, elem, attrs, gridTableCtrl) {
             console.log(gridTableCtrl.getColumns());
         }
      }
   });

The key thing here is the require property.

answered Jan 12, 2016 at 12:17

Vikram Kumar

3101 gold badge2 silver badges10 bronze badges

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

1 Comment

Kamil P Over a year ago

Thank u! It works for me :) One thing - scope in gridTable was not defined. I've changed it to $scope.

Collectives™ on Stack Overflow

AngularJS - directive in another directive and communication

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related