181 votes

Puis-je faire une fonction disponible dans chaque contrôleur angulaire?

Si j'ai une fonction utilitaire foo que je veux être en mesure d'appeler à partir de n'importe où à l'intérieur de mon ng-app déclaration. Est-il d'une certaine manière je peux la rendre accessible dans le monde entier dans ma configuration de module ou dois-je l'ajouter à la portée de tous les contrôleurs?

282voto

Anders Ekdahl Points 5678

En gros, vous avez deux options, soit la définir comme un service, ou à placer sur la racine de votre portée. Je vous conseille de vous rendre un service pour éviter de polluer la racine de la portée. Vous créez un service et de le rendre disponible dans votre contrôleur comme ceci:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.factory('myService', function() {
        return {
            foo: function() {
                alert("I'm foo!");
            }
        };
    });

    myApp.controller('MainCtrl', ['$scope', 'myService', function($scope, myService) {
        $scope.callFoo = function() {
            myService.foo();
        }
    }]);
    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="callFoo()">Call foo</button>
</body>
</html>

Si ce n'est pas une option pour vous, vous pouvez l'ajouter à la racine de la portée comme ceci:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.run(function($rootScope) {
        $rootScope.globalFoo = function() {
            alert("I'm global foo!");
        };
    });

    myApp.controller('MainCtrl', ['$scope', function($scope){

    }]);
    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="globalFoo()">Call global foo</button>
</body>
</html>

De cette façon, tous vos modèles peuvent appeler globalFoo() d'avoir à passer à un modèle à partir du contrôleur.

50voto

rickerlr Points 11

Vous pouvez également combiner entre eux, je suppose:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('myApp', []);

        myApp.factory('myService', function() {
            return {
                foo: function() {
                    alert("I'm foo!");
                }
            };
        });

        myApp.run(function($rootScope, myService) {
            $rootScope.appData = myService;
        });

        myApp.controller('MainCtrl', ['$scope', function($scope){

        }]);

    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="appData.foo()">Call foo</button>
</body>
</html>

43voto

Praym Points 81

Si la première approche est préconisée comme 'l'angle comme approche, je sens que c'ajoute les frais généraux.

Prendre en compte si je veux utiliser cette myservice.foo fonction dans 10 différents contrôleurs. Je vais préciser ce " myService la dépendance et puis $champ d'application.callFoo propriété étendue à tous les dix d'entre eux. C'est tout simplement une répétition et d'une certaine façon, viole le principe DRY.

Alors que, si j'utilise le $rootScope approche, je précise cette fonction globale gobalFoo qu'une seule fois et il sera disponible dans tous mes futurs contrôleurs, n'importe comment beaucoup de.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: