AngularJS : Comment passer des arguments/fonctions à une directive ?

Question

Regardez ce violon Que dois-je changer pour que les expressions dans le modèle soient évaluées en utilisant les arguments que j'ai définis dans le HTML ? Le bouton SAVE devrait appeler la fonction blabla() -fonction du contrôleur, puisque je la 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 n'y vois pas vraiment clair. Merci pour votre aide !

Answer 1

Vous pouvez définir une liaison de données bidirectionnelle avec property: '=' comme le suggère Roy. Donc si vous voulez les deux key et value lié à la portée locale, vous feriez

scope: {
    key: '=',
    value: '='
},

Puisque vous transmettez ces valeurs, vous y avez accès dans le contrôleur de votre directive. Mais si vous voulez exécuter une fonction dans le contexte de la portée parent, ce qui semble être ce que vous voulez faire avec la directive accept vous devrez alors indiquer à angular ce qui suit

scope: {
    accept: "&"
}

Maintenant, de votre save vous pouvez appeler la fonction transmise par la méthode accept

controller: function($scope, $element, $attrs, $location) {
    $scope.save= function() {      
        $scope.accept()
    };
}

Voici un jsfiddle

Answer 2

scope: {
    accept: "&"
}

Utilisez des lettres minuscules pour les noms de fonctions, sinon cela ne fonctionne pas.

Answer 3

Vous pouvez modifier votre champ d'application en ce sens :

    scope: {
        accept: "="
    },

Consultez la section "portée" de l documentation sur les directives pour en savoir plus sur ce que cela fait, mais essentiellement, cela établit une liaison bidirectionnelle entre la valeur de l'attribut "accept" et l'étendue parent.