AngularJS: Comment passer des arguments / fonctions à une directive?
Regardez ce Violon , que dois-je changer, que les expressions dans le modèle sont évaluées en utilisant les arguments que j'ai défini dans le code HTML? Le bouton de sauvegarde devrait appeler la fonction blabla() du contrôleur, puisque je le passe?
var myApp = angular.module('MyApp',[])
myApp.directive('editkeyvalue', function() {
return {
restrict: 'E',
replace: true,
scope: {
accept: "expression"
},
template : '<div><label class="control-label">{{key}}</label>' +
'<label class="control-label">{{key}}</label>' +
'<input type="text" ng-model="value" />'+
'<button type="button" x-ng-click="cancel()">CANCEL</button>' +
'<button type="submit" x-ng-click="save()">SAVE</button></div>',
controller: function($scope, $element, $attrs, $location) {
$scope.save= function() {
$scope.accept();
};
}
}
});
Je ne vois pas vraiment à travers cela. Merci pour l'aide!
3 réponses
vous pouvez définir la liaison de données bidirectionnelle avec property: '=' comme Roy le suggère. Donc si vous voulez à la fois key et value lié à la portée locale vous feriez
scope: {
key: '=',
value: '='
},
puisque vous passez ces valeurs, vous y avez accès dans le contrôleur de votre directive. Mais dans le cas où vous souhaitez exécuter une fonction dans le contexte de la portée parent, qui semble être ce que vous voulez faire avec le accept attribut, alors vous devez dire angulaire comme ce
scope: {
accept: "&"
}
maintenant, à partir de votre méthode save vous pouvez appeler la fonction transmise via accept
controller: function($scope, $element, $attrs, $location) {
$scope.save= function() {
$scope.accept()
};
}
voici un jsfiddle
juste une petite note que vous n'avez pas besoin de la fonction d'emballage enregistrer. Il suffit de l'appeler dans le modèle:
'<button type="submit" x-ng-click="accept()">SAVE</button></div>',
qui transpose l'appel de fonction et passe les paramètres comme prévu.
Cela simplifie le code et le rend beaucoup plus facile à lire.