Если у меня есть функция утилиты foo
, которую я хочу иметь возможность звонить из любой точки моего объявления ng-app
. Есть ли какая-нибудь возможность сделать ее доступной по всему миру в моей настройке модуля или мне нужно добавить ее в область на каждом контроллере?
Могу ли я сделать функцию доступной в каждом контроллере в angular?
Ответ 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.
Это немного обходное решение, и я не уверен, что он помогает вам, но это определенно помогло мне, поскольку у меня было много функций, и это была боль, добавляющая все их на каждую страницу.