AngularJs Direktive Scope '&' Method

Viele AngularJs-Entwickler kennen bereits die AngularJs-Direktiven und wahrscheinlich auch den Geltungsbereich der Direktive und ihre Methoden.

Es gibt 3 Methoden des Anwendungsbereichs für AngularJs Direktive: '@', '=', '&', aber jetzt werden wir nur über die Methode '&' sprechen. Hier erfahren Sie, wie man die Methode '&' in unseren Anwendungen implementieren können.

Wenn wir eine Funktion im aktuellen Umfang definieren und sie in beliebige Direktiven implementieren wollen, vergessen Sie nicht, dass Sie auf die Argumente Ihrer Funktion und ihre Reihenfolge achten müssen. Z. B. beim Definieren einer Funktion wie in unserem Beispiel:

...
$scope.myFunction = function(arg1, arg2, ...){
    ...
}
...

Sie müssen sich an Ihr Funktionsargument und seine Reihenfolge erinnern: 1:arg1,2:arg2 ...

Wenn Sie eine beliebige Direktive definiert haben und myFunction darin implementieren wollen, können Sie folgendes machen.

<my-directive any-function="myFunction(arg1, arg2, ...)"></my-directive>
<!--Or-->
<my-directive any-function="myFunction(newArgName1, newArgName2, ...)"></my-directive>

Wenn Sie sich für diese Syntax entschieden haben, müssen Sie innerhalb Ihrer Direktive (wo Sie sie verwenden wollen) spezielle Syntax verwenden, um Argumente zu senden.

Hier ist die Syntax.

// inside you directive
...
scope.anyFunction({arg1: [value], arg2: [value], arg3: [value], ...})
// Or
scope.anyFunction({newArgName1: [value], newArgName1: [value], newArgName1: [value], ...})
...

Aber Angular wird nicht so cool sein, wenn es nicht die folgende zweite Syntax der Methode '&' gäbe. Diese Methode ist sehr nützlich, wenn Sie keine Compile- oder Link-Funktion Ihrer Direktive haben möchten. Oder möchten Sie keinen zu langen Code haben.

Hier ist die zweite Methode.

<my-directive any-function="myFunction({arg1: [value], arg2: [value], arg3: [value], ...})"></my-directive>
<!--Or-->
<my-directive any-function="myFunction({newArgName1: [value], newArgName1: [value], newArgName1: [value], ...})"></my-directive>

Innerhalb Ihrer Direktive können Sie nur anyFunction() (ohne Argumente) aufrufen.

Hier ist ein einfaches Beispiel, wo wir es so verwenden können.

Nehmen wir an, dass Sie eine Liste von Elementen haben und für jedes Element, das Sie löschen möchten, möchten Sie eine Bestätigung für jedes Löschen (z. B. Modal mit Antwort "yes" oder "no"). Sie können eine Direktive mit ihrer Vorlage (modal) erstellen und Ihre Löschfunktion in sie einfügen. Innerhalb Ihrer Direktive können Sie nur Veranstaltungen zur Eröffnung von Modal durchführen. Bei "yes" erscheint Ihre Bestätigungsfunktion. Natürlich kann jede Löschaktion ein anderes Argument haben. Aber was soll man tun? Wie wir ng-click mit verschiedenen Funktionen benutzen können?

Die Antwort ist: Sie müssen keine andere Funktion verwenden. Sie können nur eine Funktion verwenden, um sie ohne Argument wie das erste Beispiel aufzurufen.