web-dev-qa-db-fra.com

Comment appeler une fonction de service dans AngularJS ng-click (ou ng-change, ...)?

Lors de l'appel d'une fonction comme celle-ci:

HTML:

<select ng-model="var" ng-change="myFunction(var)">
  <option ng-repeat="option in alloptions">{{option}}</option>
</select>

JS:

$scope.myFunction = function(){//do things}

tout fonctionne parfaitement mais lorsque ma fonction est dans un service (qui peut être atteint par le contrôleur) la fonction n'est pas appelée. l'appeler en mettant le nom du service en tant que préfixe n'est pas non plus une option (même si cela fonctionne dans le code javascript lui-même) myService.myFunction(var)

Alors ma question: quelle est la bonne façon d'appeler des services dans ng-change lorsqu'ils sont situés dans un service?

merci d'avance

javascriptangularjsservice
18
Sleenee

Vous devez appeler des fonctions de service à l'aide de fonctions via la portée. Ainsi, dans votre exemple, vous pouvez appeler la méthode de service dans la méthode myfunction de la portée, à condition que votre service soit injecté dans votre contrôleur.

$scope.myFunction = function(var){

   myService.myFunction(var);    
}

N'oubliez pas que seules les propriétés définies dans $ scope sont disponibles dans l'interface utilisateur et non vos services.

29
Nishanth Nair

Bien que la réponse de Whizkids soit techniquement correcte, je ne vois aucun problème à exposer l'ensemble du service à la vue en l'attachant directement à la portée. Cependant, cela dépend de la complexité de votre projet et de la conception de vos services.

Par exemple, la plupart des services relatifs aux états de vue réutilisables que j'écris ne sont qu'un ensemble de fonctions, l'une exposant les données sous-jacentes.

return {
    getData: function() { return container; },
    doSomethingOnData: function() { /* some manipulation of container */ }
};

Vous pouvez maintenant accéder aux données de service en les attachant simplement à un $scope variable:

$scope.serviceData = MyService.getData();

Ainsi, vos options pour accéder aux fonctions de service consistent soit à aller avec la réponse Whizkids et à créer des fonctions d'encapsulation attachées à la portée, soit à exposer le service directement à la vue.

$scope.$MyService = MyService;

À laquelle vous pourriez faire quelque chose comme:

<div ng-click="$MyService.doSomethingOnData()"></div>

Bien que cette pratique soit strictement contraire aux principes de séparation angulaire, elle rend le code concis si vous avez beaucoup de fonctions au sein de votre service que vous devez exposer avec des wrappers simples.

15
Matt Way