web-dev-qa-db-fra.com

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

Regardez ce violon , que dois-je changer, pour que les expressions du modèle soient évaluées à l'aide des arguments que j'ai définis dans le code HTML? Le bouton SAVE 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!

javascripthtml5controllerscopeangularjs
46
user1879408

Vous pouvez définir une liaison de données bidirectionnelle avec property: '=', Comme le suggère Roy. Donc, si vous voulez que key et value soient liés à 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 souhaitez exécuter une fonction dans le contexte de la portée parente, ce qui semble être ce que vous voulez faire avec l'attribut accept, vous devez indiquer angular comme ceci:

scope: {
    accept: "&"
}

Maintenant, depuis 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

46
jaime
scope: {
    accept: "&"
}

Utilisez des lettres minuscules pour les noms de fonction, sinon cela ne fonctionnera pas.

15
user1972450

Juste une note rapide indiquant que vous n’avez pas besoin de la fonction d’enregistrement. Il suffit d'appeler cela dans le modèle:

'<button type="submit" x-ng-click="accept()">SAVE</button></div>',

Cela transpose l'appel de fonction et transmet les paramètres comme prévu.

Cela simplifie le code et le rend beaucoup plus facile à lire.

1
Gary Blake