CODEWITHSUNDEEP
angularjs
Kamil P
Kamil P

Reputation: 784

AngularJS - directive in another directive and communication

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?

Upvotes: 0

Views: 47

Answers (1)

Vikram Kumar
Vikram Kumar

Reputation: 310

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.

Upvotes: 1

Related Questions