angularjs Direktive - funktioniert nicht richtig

Question

Ich versuche, eine Direktive zu schreiben, die ein Untermenü erstellt.

Meine Idee war, diese Direktive ziemlich flexibel zu machen, damit ich sie bei Bedarf wiederverwenden kann.

Das Grundkonzept ist die folgende:

<my-submenu> 
    <li my-function="test()">Test</li> 
    <li my-function="test2()">Test 2</li> 
    <li my-function="test3(id, type)">Test 3</li> 
    <li ui-sref="test ({id: id})">Test 4</li> 
</my-submenu> 

Dies ist eine recht einfache Vorlage. Alle Elemente, die in meinem Untermenü enthalten sein müssen, befinden sich wie oben in der Direktive.

Die Richtlinie Teil:

angular.module('submenu', []).directive('mySubmenu', [ 
    function() { 
    var linkFunction; 

    linkFunction = function(scope, el, attr) { 
     console.log("scope: ", scope); 
     console.log("el: ", el); 
     return console.log("Attr: ", attr); 
    }; 

    return { 
     restrict: 'E', 
     transclude: true, 
     templateUrl: './submenu.tpl.html', 
     scope: { 
     myFunction: '&' 
     }, 
     link: linkFunction 
    }; 
    } 
]); 

und die Richtlinie Vorlage:

<ul ng-transclude></ul> 

nun das kompilierte Ergebnis ist ziemlich genau, wie ich es sein will:

<my-submenu> 
<ul ng-transclude=""> 
    <li my-function="test()">Test</li> 
    <li my-function="test2()">Test 2</li> 
    <li my-function="test3(id, type)">Test 3</li> 
    <li ui-sref="test ({id: id})">Test 4</li> 
</ul> 
</hg-room-submenu> 

Aber Dadurch habe ich alle meine Funktionen verloren, sie arbeiten nicht mehr.

Ich lese, dass wenn Sie Funktionen verwenden möchten, müssen Sie "&" wie ich tue, aber es funktioniert immer noch nicht.

Irgendwelche Vorschläge? Und ist dies auch der beste Ansatz, um so etwas zu schaffen, oder sollte ich etwas anderes machen?

Dank

PS: Ich habe auch versucht my-function-ng-click in dem kompilierten Code zu ändern, aber immer noch nichts.

Das ist eigentlich eine andere Sache, ich brauche Hilfe mit - Wie kann ich my-function zu ng-click in der Vorlage kompilierte Richtlinie konvertieren? oder kann ich einfach ng-click anstelle von my-function verwenden?

Answer 1

Die Verwendung von my-function für ein verschachteltes Element innerhalb der Direktive ist für die Direktive nicht relevant. Es wird einfach bleiben, was es ist - ein bedeutungsloses Attribut. Das Attribut & (und alle Direktivenbindungen) funktioniert nur, wenn es sich um dasselbe Element wie die Direktive handelt.

In Ihrem Fall können Sie einfach in Ihrem vorkompilierten HTML verwenden.

Als eine Randnotiz hat das dynamische Ändern von Attributen nach dem Kompilieren der Direktiven keine Auswirkungen auf die Direktiven oder die Scope-Bindings - soweit es den directional Compiler von angular betrifft. Neue Attribute werden nicht in Anweisungen kompiliert oder Bindungen zum Bereich erstellt, und gelöschte Attribute werden keine Bindungen zum Bereich rückgängig machen. Der Anweisungscompiler sammelt nur die Attribute, die zum Zeitpunkt der Kompilierung des Elements im Element vorhanden sind.