Winkel: Binden, callback-Funktion, die Verwendung von & und pass-Argumente

Habe ich eine (vereinfachte) Richtlinie

angular.module('myApp')
   .directive('myButton', function () {
        return {
            restrict: 'E',
            scope: {
                callbackFn: '&'
            },
            template: '<button ng-click=ca;;backFn($evenb)'
        }
   });

Nun, in einigen übergeordneten controller habe ich definiert eine callback-Funktion:

this.myCallback = function ($event) {
    this.doIt($event);
}

und HTML:

<my-button callback-fn="page.myCallback()"></my-button>

(Ich bin mit Dingen wie bindToController und controllerAs)

Das Problem ist, dass die $event ist nie übergeben myCallback ist, der wahrscheinlich damit zu tun, wie ich binden diese Funktion (&). Aber auf der anderen Seite, im inneren myCallback ich möchte this.

Gibt es eine Möglichkeit, dieses Problem zu beheben ? ohne Dinge zu tun, wie

var self = this;
this.myCallback = function ($event) {
     self.doIt($event);
}

InformationsquelleAutor Jeanluca Scaljeri | 2015-10-21

  1. 14

    Du Sie noch nicht komplett eingerichtet, Ihre Bindungen richtig. Sie können gehen wieder die Argumente aus der Richtlinie zu den übergeordneten controller über eine Schlüssel-Wert-Karte. Nach der Winkel-docs (Hervorhebung von mir):

    & oder &attr - bietet die Möglichkeit zum ausführen eines Ausdrucks im Kontext der übergeordneten Bereich. Wenn keine attr-name angegeben ist, dann wird das Attribut name wird davon ausgegangen, dass der gleiche wie der lokale name. Angesichts <widget my-attr="count = count + value"> - und widget-definition von scope: { localFn:'&myAttr'}, dann isolieren Eigenschaft scope (Bereich) localFn zeigen wird, eine wrapper-Funktion für die count = count + value Ausdruck. Oft ist es wünschenswert, zum übergeben von Daten aus dem isolierten scope über einen Ausdruck auf den übergeordneten Bereich, diese kann getan werden, indem eine Karte des lokalen Variablennamen und Werte in den Ausdruck wrapper fn. Zum Beispiel, wenn der Ausdruck increment(amount) dann können wir angeben, wie viel Wert durch den Aufruf der localFn als localFn({amount: 22}).

    Also das bedeutet, dass in Ihrem Konsum HTML Sie benötigen, um Parameter hinzufügen:

    <my-button callback-fn="page.myCallback(parentEvent)"></my-button>

    Und dann in der Richtlinie:

    ......
restrict: 'E',
scope: {
            callbackFn: '&'
       },
template: '<button ng-click="ctrl.callbackFn({parentEvent: $event})">Callback</button>'

    danke!!! Jahrhunderte gerungen mit diesem. Tolle Erklärung

    InformationsquelleAutor ryanyuyu

  2. 1

    Meiner Meinung nach sollte man es so machen :

    In Ihre HTML-Seite :

    <my-button callback-fn="page.myCallback(event)"></my-button>

    In Ihrer Richtlinie :

    angular.module('myApp')
    .directive('myButton', function () {
        return {
            restrict: 'E',
            controller: 'Controller',
            bindToController: true,
            scope: {
                callbackFn: '&'
            },
            template: '<button ng-click=foo($event)'
        }
});

function Controller() {
    this.foo = function (event) {
        this.callbackFn({event: event});
    }   
}

    Aber ich bin nicht sur was ist der Sinn Ihrer Frage.

    InformationsquelleAutor Tako

Schreibe einen Kommentar