Angulaire: pour Lier la fonction de rappel à l'aide de & et de les passer en arguments

J'ai un (simplifié) de la directive

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

Maintenant, dans certains contrôleur de parent, j'ai défini une fonction de rappel:

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

et le code HTML:

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

(Je suis en utilisant des choses comme bindToController et controllerAs)

Le problème est que le $event est jamais passé à myCallback, qui a probablement à voir avec la façon dont je la lie de cette fonction (&). Mais d'un autre côté, à l'intérieur de myCallback je voudrais utiliser this.

Est-il un moyen de résoudre ce problème ? sans faire les choses comme

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

OriginalL'auteur Jeanluca Scaljeri | 2015-10-21

14

Vous n'avez pas complètement définir vos fixations correctement. Vous pouvez passer de nouveau les arguments de la directive pour le contrôleur de parent par l'intermédiaire d'une clé-valeur de la carte. Selon le angulaire docs (l'emphase est mienne):

& ou &attr - fournit un moyen pour exécuter une expression dans le contexte de la portée parent. Si aucun attribut nom est spécifié, le nom de l'attribut est supposé être le même que le nom local. Compte tenu de <widget my-attr="count = count + value"> et widget définition de scope: { localFn:'&myAttr'}, puis isoler la portée de la propriété localFn pointe vers une fonction wrapper pour la count = count + value expression. Il est souvent souhaitable pour transmettre les données à partir de l'isolé portée par une expression à la portée parent, ce qui peut être fait par le passage d'un plan de noms de variables et les valeurs dans l'expression wrapper fn. Par exemple, si l'expression est increment(amount) ensuite, nous pouvons préciser le montant de la valeur par l'appel de la localFn comme localFn({amount: 22}).

Ce qui signifie que dans votre consommation HTML, il faut ajouter des paramètres:
```
<my-button callback-fn="page.myCallback(parentEvent)"></my-button>
```
Puis dans la directive:
```
......
restrict: 'E',
scope: {
            callbackFn: '&'
       },
template: '<button ng-click="ctrl.callbackFn({parentEvent: $event})">Callback</button>'
```
merci!!!! Lutté pour les âges avec cette. Grande explication

OriginalL'auteur ryanyuyu

Selon moi, vous devriez faire de cette façon :

Dans votre page HTML :

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

Dans votre directive :

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});
    }   
}

Mais je ne suis pas sur ce qui est le point de votre question.

OriginalL'auteur Tako

Vous devez vous connecter pour publier un commentaire.