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?
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:
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);
}
}
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})
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)"
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