web-dev-qa-db-fra.com

Passage d'arguments à l'appel d'événement ngChange à partir de la directive inside

J'ai une directive qui accepte un attribut ng-change:

<radio-buttons options="optionsList" 
               ng-model="myModel" 
               ng-change="myCallback($event)"></radio-buttons>

J'ai défini une fonction dans mon contrôleur, myCallback, qui ressemble à ceci:

$scope.myCallback = function(e) {
    console.log("Callback from controller");   
    console.log(e);
}

La fonction suivante existe dans ma directive radioButton. Je dois définir quand le rappel ngChange est exécuté dans ma directive dans la fonction select:

function select(scope, val) {
    if (!scope.disabled && scope.selectedValue != val) {
        scope.selectedValue = val;
        scope.model = val;

        scope.callback.call();
    }
}

Le problème que je rencontre est que l'argument $event dans myCallback n'est pas transmis lorsque j'exécute myCallback dans la fonction select de ma directive.

Fiddle: http://jsfiddle.net/dkrotts/BtrZH/7/ Mise à jour: http://jsfiddle.net/dkrotts/BtrZH/8/

Qu'est-ce que je fais mal?

angularjsangularjs-directive
13
Dustin

Si vous voulez contrôler le moment où votre gestionnaire pour le changement-ng est appelé, je pense que le moyen le plus simple consiste à supprimer complètement le changement-ng - vous pouvez appeler la fonction contrôleur directement à partir de votre rappel ng-click.

Je pense que cela permet d'obtenir les fonctionnalités souhaitées:

http://jsfiddle.net/BtrZH/11/

Vous pouvez capturer l'objet événement du clic si nécessaire:

ng-click="select(scope, option.value, $event)"

Ensuite, vous pouvez appeler la fonction du contrôleur quand vous le souhaitez:

function select(scope, val, $event) {
    if (!scope.disabled && scope.selectedValue != val) {
        scope.selectedValue = val;
        scope.model = val;
        scope.$parent.myCallback($event);
    }
}
4
Alex Osborn

Vous devez passer le paramètre dans le rappel comme ceci:

callback({parametername: value});

Et vous devez faire correspondre le nom du paramètre avec celui déclaré dans leHTML

Dans ton cas: 

callback({$event: val})
4
nikolai karadjov

Ce qui suit n’a pas l’air beau mais fonctionne (cela créerait une autre variable $event et le passerait par ng-change):

ng-click="$event = $event" ng-change="myCallback($event)"
2
John Doe

Pour transmettre des valeurs à votre contrôleur, appelez-le à l'aide d'un objet dont les clés correspondent aux arguments du destinataire définis dans votre modèle.

par exemple.

élément

<my-element change="myFunction(value, id, event)"></my-element>

votre interlocuteur

{
   "restrict" : ...,
   "scope" : {
       "change" : "&"
    },
   "controller" : function($scope){
       this.someEventHandler = function($event){

          // called here
          scope.change({
              "value" : "somevalue",
              "id" : "someid",
              "event" : $event
          });

       }
   }
}

récepteur du contrôleur parent

$scope.myFunction = function(v, i, e){
   // do stuff
}

REF: Passage d'arguments à l'appel d'événement ngChange depuis la directive inside

1
Nate Bosscher