AngularJS Use child directives as directive data

Question

To make it short...i need to read child directive as data in the parent directive i got something like:

<ng-table url="http://api.com/getArchive1" editUrl="http://api.com/editArchive1" etc>
 <header name="id" paramName="user_id"><header/>
 <header name="name" etc></header>
 <header name="age" etc></header>
</ng-table>

So i got something like (WARNING, COFFEESCRIPT :P):

table.directive 'ngTable', (Table) ->
  restrict    : "E"
  templateUrl : "table.html"
  link : (scope, element, attrs) ->
    scope.grid = new Table(attrs) //this is a class
    //other stuff

So how do i create the other directive and get in this link function something like a array of headers??

Answer 1

You can actually deep dive into directive controllers and "transclusions".

To access parent controller you can use require option.

.directive 'parent', ->
  controller: ->
    @addHeader = (header) => #do add header

.directive 'child', ->
  require: '^parent'
  link: (scope, el, attr, parent) ->
    parent.addHeader 'from child'

But you need to make sure your child link function actually ran.

For example (WARNING JAVASCRIPT!!! :) you can use transclude option. Sophisticated Example .

  .directive('myTable', function() {
    return {
      restrict: 'E',
      controller: function() {
        var headers = []
        this.headers = headers
        this.addHeader = headers.push.bind(headers)
      },
      template: `
        <table>
          <thead>
            <tr>
            </tr>
          </thead>
        </table>
      `,
      transclude: {
        // transclude all myHeaders into headers slot
        headers: 'myHeader' // transclude (how this is a real word at all?)
      },
      link: function(scope, el, attrs, ctrl, transclude) {
        var headerRow = el.find('thead').children('tr')

        // append all headers into thead wrapping with th
        transclude(function(headers) {
          [].forEach.call(headers, header => {
            var cell = angular.element('<th></th>')
            cell.append(header)
            headerRow.append(cell)
          })
        }, headerRow, 'headers')

        console.log(ctrl.headers) // headers were populated here
      }
    }
  })
  .directive('myHeader', function() {
    return {
      restrict: 'E',
      require: '^myTable',
      transclude: true, // ohh more transclusions
      template: '<span ng-transclude></span>', 
      link: function(scope, el, attrs, myTable) {
        myTable.addHeader(attrs.name) // report to myTable
      }
    }
  })

<my-table>
  <my-header name="First"> First Header </my-header>
  <my-header name="Second"> Second <span style="color:red;">Header</span> </my-header>
</my-table>

Answer 2

The only way I could think about is using the element parameter in your link function. You could use jqLite methods with it to get all the elements with header tag inside your ng-table directive.

If I'm correct, you could not access child scopes from your parent scope, so using jqlite is probably the only option. see AngularJS - Access to child scope