Übergeben von Argumenten an die Eltern-Controller-Methode in der verschachtelten rekursiven Direktive

Question

Ich habe Schwierigkeiten, eine Eltern-Controller-Funktion in einer verschachtelten Direktive aufzurufen, die sich rekursiv selbst kompiliert. Ein Klick auf die Schaltfläche in tree-item funktioniert eine Ebene tief, aber danach sind die Variablen für doc und type undefiniert.

Diese Art von Problem ist trivial gelöst mit React, aber ich denke, neue Bereiche werden mit jedem Funktionsdurchlauf erstellt, wenn ich wirklich nur die Callback-Referenz vom Eltern übergeben möchte.

Ich denke, das könnte durch das Auslösen von Ereignissen gelöst werden, ist das eine schlechte/gute Idee?

Eltern Controller-Methode:

displayDocument(doc, type) { /* */ } 

zu tree Richtlinie weitergegeben wird:

<tree display-document="vm.displayDocument(doc, type)"></tree> 

Tree Definition:

function Tree() { 
    return { 
    restrict: 'E', 
    replace: true, 
    templateUrl: 'components/ui/biospecimen/templates/tree.html', 
    scope: { 
     displayDocument: '&', 
    } 
    } 
} 

Bestanden zu tree-item Richtlinie von tree.html:

<tree-item display-document="displayDocument(doc, type)"></tree-item> 

TreeItem Definition:

function TreeItem($compile) { 
    return { 
    restrict: 'E', 
    replace: true, 
    templateUrl: 'components/ui/biospecimen/templates/tree-item.html', 
    scope: { 
     displayDocument: '&', 
    }, 
    link: (scope, el, attrs) => { 
     el.append($compile([ 
     '<tree',   
      'data-ng-repeat="childType in [\'foo\', \'bar\']"', 
      'display-document="displayDocument(doc, type)"', 
     '></tree>' 
     ].join(' '))(scope)) 
    } 
    } 
} 

Und dann schließlich verwendet innen tree-item:

<button data-ng-click="displayDocument({ doc: doc, type: type })">Click</button>  

Answer 1

Ihr fast da. Ihr Problem besteht darin, dass Sie beim Aufruf einer Funktion von einer Direktive ein Objekt übergeben müssen, genau so, wie Sie es getan haben, als Sie das Objekt von Baumelement zu Baum übergeben haben. Winkel dann die Funktion in der Baum Richtlinie beruft, etwa so:

displayDocument(doc, type) 

das Problem ist, dass diese Funktion auch in einer Richtlinie ist es !, es muss in der gleichen Art und Weise, wie diese aufgerufen werden:

displayDocument({ doc: doc, type: type }) 

Also, wenn die Funktion in der Baum-Direktive aufgerufen werden muss mit ein Argument (das ist das Objekt {doc: doc, Typ: Typ}), dann wenn Sie es aus dem Baumelement aufrufen, müssen Sie es in der Vorlage wie schreiben so:

<tree-item display-document="displayDocument(args)"></tree-item> 

(oder ein anderer Name anstelle von 'args') und es wie so aufrufen:

<button data-ng-click="displayDocument({args: { doc: doc, type: type }})">Click</button> 

Ich habe eine Arbeits js fiddle die Ihre Situation ähnelt