ti-enxame.com

Posso disponibilizar uma função em todos os controladores em angular?

Se eu tiver uma função de utilidade foo que eu quero ser capaz de chamar de qualquer lugar dentro da minha declaração ng-app. Existe alguma maneira que eu possa torná-lo globalmente acessível na minha configuração do módulo ou eu preciso adicioná-lo ao escopo em cada controlador?

190
Ludwig Magnusson

Você basicamente tem duas opções, seja defini-lo como um serviço ou colocá-lo no seu escopo raiz. Eu sugiro que você faça um serviço para evitar poluir o escopo da raiz. Você cria um serviço e o disponibiliza no seu controlador da seguinte forma:

<!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>

Se isso não for uma opção para você, você pode adicioná-lo ao escopo raiz assim:

<!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>

Dessa forma, todos os seus modelos podem chamar globalFoo() sem ter que passá-lo para o modelo do controlador.

290
Anders Ekdahl

Você também pode combiná-los, eu acho:

<!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>
53
ric

Embora a primeira abordagem seja defendida como "a abordagem angular", sinto que isso acrescenta overheads.

Considere se eu quiser usar esta função myservice.foo em 10 controladores diferentes. Eu terei que especificar essa dependência de 'myService' e, em seguida, a propriedade de escopo $ scope.callFoo em todos os dez deles. Isto é simplesmente uma repetição e de alguma forma viola o princípio DRY.

Considerando que, se eu usar a abordagem $ rootScope, eu especifico esta função global gobalFoo apenas uma vez e ela estará disponível em todos os meus futuros controladores, não importa quantos.

44
Praym

AngularJs tem " Serviços " e " Fábricas " apenas para problemas como o seu .Estes são usados ​​para ter algo global entre Controladores, Diretivas, Outros Serviços ou quaisquer outros componentes angularjs .. Você pode definir funções, armazenar dados, fazer calcular funções ou o que você quiser dentro Serviços e usá-los em componentes AngularJs como Global .gostar

angular.module('MyModule', [...])
  .service('MyService', ['$http', function($http){
    return {
       users: [...],
       getUserFriends: function(userId){
          return $http({
            method: 'GET',
            url: '/api/user/friends/' + userId
          });
       }
       ....
    }
  }])

se você precisar de mais

Encontre mais sobre porque precisamos de serviços e fábricas AngularJs

4
Hazarapet Tunanyan

Eu sou um pouco mais novo para Angular mas o que eu achei útil para fazer (e bastante simples) é que eu fiz um script global que eu carrego na minha página antes do script local com variáveis ​​globais que eu preciso acessar em todas as páginas de qualquer maneira. Nesse script, criei um objeto chamado "globalFunctions" e adicionei as funções que preciso acessar globalmente como propriedades. por exemplo. globalFunctions.foo = myFunc();. Então, em cada script local, eu escrevi $scope.globalFunctions = globalFunctions; e instantaneamente tenho acesso a qualquer função que adicionei ao objeto globalFunctions no script global.

Este é um pouco de uma solução alternativa e eu não tenho certeza se isso ajuda, mas definitivamente me ajudou como eu tinha muitas funções e foi uma dor adicionando todos eles para cada página.

0
Izzy