AngularJS Verwenden Kind Richtlinien als Anweisungsdaten

Question

Um es kurz zu machen ... ich brauche Kind Richtlinie zu lesen, wie Daten in der übergeordneten Richtlinie ich etwas bekam wie:

<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> 

Also habe ich so etwas wie (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 wie ich das mache die andere Richtlinie erstellen und in diesem Link-Funktion so etwas wie ein Array von Headern bekommen ??

Answer 1

Sie können tatsächlich tief in Directive-Controller und "Transclusions" tauchen.

Um auf den übergeordneten Controller zuzugreifen, können Sie die Option require10 verwenden.

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

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

Aber Sie müssen sicherstellen, dass Ihre Child Link-Funktion tatsächlich ausgeführt wurde.

Zum Beispiel (WARNUNG JAVASCRIPT !!! :) können Sie transclude Option verwenden. 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

Die einzige Möglichkeit, über die ich nachdenken könnte, ist die Verwendung des Elementparameters in Ihrer Linkfunktion. Sie könnten jqLite-Methoden verwenden, um alle Elemente mit einem Header-Tag innerhalb Ihrer ng-table-Anweisung zu erhalten.

Wenn ich richtig bin, konnten Sie nicht auf untergeordnete Bereiche von Ihrem übergeordneten Bereich zugreifen, also ist die Verwendung von jqlite wahrscheinlich die einzige Option. siehe AngularJS - Access to child scope