web-dev-qa-db-fra.com

Où placer les fonctions définies par l'utilisateur dans Angular JS?

À mon avis, je veux rendre:

<p>
  {{ say() }}
</p>

Où say est défini comme tel:

say = function() {
  return "Hello World";
}

Je peux le définir dans mon contrôleur:

function TestCtrl($scope) {
  $scope.say = function() { ... };
}

Mais alors il n'est accessible que dans ce contrôleur.

Si je définis la fonction en dehors de la structure de fichier Angular, elle ne restitue rien. Même si je la définis dans mon controllers.js fichier, mais en dehors de la portée d'une fonction de contrôleur.

Où est le bon endroit pour mettre ma fonction, donc je peux la rendre dans n'importe quel contrôleur?

javascriptmodel-view-controllerscopeangularjs
35
Kyle Macey

Une façon consiste à créer un service avec les fonctions que vous souhaitez partager entre plusieurs contrôleurs. Voir cet article pour plus d'informations.

Après cela, vous pouvez injecter le service que vous avez créé dans n'importe quel contrôleur et accéder à la fonction say() avec du code quelque chose comme ceci:

function TestCtrl($scope, myService){
   $scope.say = myService.say;
}

Où vous avez défini myService comme:

angular.module('myApp', [])
    .factory('myService', function () {
        return {
            say: function () {
                return "Hello World";
            }
        }
    });

Voici un jsFiddle avec un exemple.

48
Gloopy