Могу ли я сделать функцию доступной в каждом контроллере в angular?

Если у меня есть функция утилиты foo, которую я хочу иметь возможность звонить из любой точки моего объявления ng-app. Есть ли какая-нибудь возможность сделать ее доступной по всему миру в моей настройке модуля или мне нужно добавить ее в область на каждом контроллере?

Ответ 1

В основном у вас есть два варианта: определить его как услугу или поместить в корневую область. Я бы посоветовал вам избавиться от него, чтобы избежать загрязнения корневой области. Вы создаете сервис и делаете его доступным в своем контроллере следующим образом:

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

Если это не вариант для вас, вы можете добавить его в корневую область следующим образом:

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

Таким образом, все ваши шаблоны могут вызывать globalFoo(), не передавая его шаблону с контроллера.

Ответ 2

Вы также можете комбинировать их, я думаю:

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

Ответ 3

Хотя первый подход рассматривается как "подход angular как будто", я чувствую, что это добавляет накладные расходы.

Рассмотрим, хочу ли я использовать эту функцию myservice.foo в 10 разных контроллерах. Мне нужно будет указать эту зависимость "myService", а затем свойство scope scope scope.callFoo во всех десяти из них. Это просто повторение и как-то нарушает принцип СУХОЙ.

В то время как если я использую подход $rootScope, я определяю эту глобальную функцию gobalFoo только один раз, и он будет доступен во всех моих будущих контроллерах, независимо от того, сколько.

Ответ 4

У AngularJs есть " Услуги" и " Заводы" только для таких проблем, как yours.These используются, чтобы иметь что-то глобальное между контроллерами, директивами, другими службами или любые другие угловые компоненты. Вы можете определять функции, хранить данные, выполнять функции расчета или все, что хотите внутри Услуги, и использовать их в компонентах AngularJs как Глобальный. как

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

если вам нужно больше

Узнайте больше о том, почему нам нужны услуги и заводы AngularJs

Ответ 5

Я немного новичок в Angular, но то, что мне было полезно делать (и довольно просто), я сделал глобальным script, который я загружаю на свою страницу перед локальным script с глобальными переменными, которые я в любом случае нужно иметь доступ на всех страницах. В этом script я создал объект под названием "globalFunctions" и добавил функции, которые мне нужны для доступа во всем мире как к свойствам. например globalFunctions.foo = myFunc();. Затем в каждом локальном script я написал $scope.globalFunctions = globalFunctions;, и у меня сразу есть доступ к любой функции, которую я добавил в объект globalFunctions в глобальном script.

Это немного обходное решение, и я не уверен, что он помогает вам, но это определенно помогло мне, поскольку у меня было много функций, и это была боль, добавляющая все их на каждую страницу.