Kann eine Winkelanweisung Argumente an Funktionen in Ausdrücken übergeben, die in den Attributen der Anweisung angegeben sind?

Ich habe eine Formularanweisung, die ein angegebenes callbackAttribut mit einem isolierten Bereich verwendet:

scope: { callback: '&' }

Es befindet sich in einem, ng-repeatsodass der Ausdruck, den ich übergebe, das iddes Objekts als Argument für die Rückruffunktion enthält:

<directive ng-repeat = "item in stuff" callback = "callback(item.id)"/>

Wenn ich mit der Direktive fertig bin, ruft sie $scope.callback()von ihrer Controller-Funktion auf. In den meisten Fällen ist dies in Ordnung und es ist alles, was ich tun möchte, aber manchmal möchte ich ein weiteres Argument aus dem Inneren heraus hinzufügen directive.

Gibt es einen Winkelausdruck, der dies zulässt: $scope.callback(arg2)was dazu führt, callbackdass mit aufgerufen wird arguments = [item.id, arg2]?

Wenn nicht, wie geht das am besten?

Ich habe festgestellt, dass dies funktioniert:

<directive 
  ng-repeat = "item in stuff" 
  callback = "callback" 
  callback-arg="item.id"/>

Mit

scope { callback: '=', callbackArg: '=' }

und die Richtlinie aufrufen

$scope.callback.apply(null, [$scope.callbackArg].concat([arg2, arg3]) );

Aber ich denke nicht, dass es besonders ordentlich ist und es beinhaltet, zusätzliches Zeug in den isolierten Bereich zu stellen.

Gibt es einen besseren Weg?

Plunker Spielplatz hier (Konsole geöffnet haben).

Wenn Sie Ihren Rückruf wie von @ lex82 erwähnt wie deklarieren

callback = "callback(item.id, arg2)"

Sie können die Rückrufmethode im Direktivenbereich mit Objektzuordnung aufrufen und sie würde die Bindung korrekt ausführen. Mögen

scope.callback({arg2:"some value"});

ohne dass $ parse erforderlich ist. Siehe meine Geige (Konsolenprotokoll) http://jsfiddle.net/k7czc/2/

Update : In der Dokumentation finden Sie ein kleines Beispiel dafür :

& oder & attr - bietet eine Möglichkeit, einen Ausdruck im Kontext des übergeordneten Bereichs auszuführen. Wenn kein attr-Name angegeben wird, wird angenommen, dass der Attributname mit dem lokalen Namen übereinstimmt. Gegebene und Widget-Definition des Gültigkeitsbereichs: {localFn: '& myAttr'}. Anschließend zeigt die isolierte Bereichseigenschaft localFn auf einen Funktionswrapper für den Ausdruck count = count + value. Oft ist es wünschenswert, Daten aus dem isolierten Bereich über einen Ausdruck an den übergeordneten Bereich zu übergeben. Dies kann durch Übergeben einer Zuordnung lokaler Variablennamen und -werte an den Ausdrucks-Wrapper fn erfolgen. Wenn der Ausdruck beispielsweise Inkrement (Betrag) ist, können wir den Betragswert angeben, indem wir localFn als localFn aufrufen ({Betrag: 22}).

An den anderen Antworten ist nichts auszusetzen, aber ich verwende die folgende Technik, wenn ich Funktionen in einem Direktivenattribut übergebe.

Lassen Sie die Klammern weg, wenn Sie die Direktive in Ihr HTML aufnehmen:

<my-directive callback="someFunction" />

Dann "entpacken" Sie die Funktion im Link oder Controller Ihrer Direktive. Hier ist ein Beispiel:

app.directive("myDirective", function() {

    return {
        restrict: "E",
        scope: {
            callback: "&"                              
        },
        template: "<div ng-click='callback(data)'></div>", // call function this way...
        link: function(scope, element, attrs) {
            // unwrap the function
            scope.callback = scope.callback(); 

            scope.data = "data from somewhere";

            element.bind("click",function() {
                scope.$apply(function() {
                    callback(data);                        // ...or this way
                });
            });
        }
    }
}]);    

Mit dem Schritt "Entpacken" kann die Funktion mit einer natürlicheren Syntax aufgerufen werden. Außerdem wird sichergestellt, dass die Direktive auch dann ordnungsgemäß funktioniert, wenn sie in anderen Direktiven verschachtelt ist, die die Funktion möglicherweise übergeben. Wenn Sie das Auspacken nicht durchgeführt haben, haben Sie ein Szenario wie das folgende:

<outer-directive callback="someFunction" >
    <middle-directive callback="callback" >
        <inner-directive callback="callback" />
    </middle-directive>
</outer-directive>

Dann würden Sie so etwas in Ihrer inneren Richtlinie finden:

callback()()()(data); 

Was in anderen Verschachtelungsszenarien fehlschlagen würde.

Ich habe diese Technik aus einem ausgezeichneten Artikel von Dan Wahlin unter http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters angepasst

Ich habe den Entpackungsschritt hinzugefügt, um das Aufrufen der Funktion natürlicher zu gestalten und das Verschachtelungsproblem zu lösen, auf das ich in einem Projekt gestoßen bin.

In der Direktive ( myDirective):

...
directive.scope = {  
    boundFunction: '&',
    model: '=',
};
...
return directive;

In der Richtlinienvorlage:

<div 
data-ng-repeat="item in model"  
data-ng-click='boundFunction({param: item})'>
{{item.myValue}}
</div>

In der Quelle:

<my-directive 
model='myData' 
bound-function='myFunction(param)'>
</my-directive>

...wo myFunction in der Steuerung definiert ist.

Beachten Sie, dass paramdie Vorlage in der Direktive paramin der Quelle sauber gebunden ist und auf gesetzt ist item.

linkVerwenden Sie einen sehr ähnlichen Ansatz, um aus der Eigenschaft einer Direktive ("innerhalb" derselben) heraus aufzurufen :

...
directive.link = function(isolatedScope) {
    isolatedScope.boundFunction({param: "foo"});
};
...
return directive;

Ja, es gibt einen besseren Weg: Sie können den $ parse-Dienst in Ihrer Direktive verwenden, um einen Ausdruck im Kontext des übergeordneten Bereichs auszuwerten, während Sie bestimmte Bezeichner im Ausdruck an Werte binden, die nur in Ihrer Direktive sichtbar sind:

$parse(attributes.callback)(scope.$parent, { arg2: yourSecondArgument });

Fügen Sie diese Zeile der Verknüpfungsfunktion der Direktive hinzu, über die Sie auf die Attribute der Direktive zugreifen können.

Ihr callback = "callback(item.id, arg2)"Rückrufattribut kann dann wie folgt festgelegt werden, da arg2 vom $ parse-Dienst in der Direktive an yourSecondArgument gebunden wird. Mit Direktiven wie können ng-clickSie über den $eventBezeichner innerhalb des an die Direktive übergebenen Ausdrucks auf das Klickereignis zugreifen, indem Sie genau diesen Mechanismus verwenden.

Beachten Sie, dass Sie callbackmit dieser Lösung kein Mitglied Ihres isolierten Bereichs machen müssen.

Für mich hat folgendes funktioniert:

in der Richtlinie erklären Sie es so:

.directive('myDirective', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            myFunction: '=',
        },
        templateUrl: 'myDirective.html'
    };
})  

Verwenden Sie die Direktivenvorlage folgendermaßen:

<select ng-change="myFunction(selectedAmount)">

Wenn Sie dann die Direktive verwenden, übergeben Sie die Funktion wie folgt:

<data-my-directive
    data-my-function="setSelectedAmount">
</data-my-directive>

Sie übergeben die Funktion durch ihre Deklaration und sie wird aus der Direktive aufgerufen und Parameter werden ausgefüllt.