Lud*_*son 191 global function angularjs
如果我有一个实用工具函数foo
,我希望能够从我的ng-app
声明中的任何地方调用.有没有我可以在我的模块设置中使其全局可访问,或者我是否需要将其添加到每个控制器的范围?
And*_*ahl 290
您基本上有两个选项,可以将其定义为服务,也可以将其放在根范围内.我建议您从中提供服务以避免污染根范围.您创建一个服务并使其在控制器中可用,如下所示:
<!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>
Run Code Online (Sandbox Code Playgroud)
如果这不是您的选择,您可以将其添加到根范围,如下所示:
<!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>
Run Code Online (Sandbox Code Playgroud)
这样,您可以调用所有模板,globalFoo()
而无需将其从控制器传递给模板.
ric*_*ric 53
我猜你也可以把它们结合起来:
<!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>
Run Code Online (Sandbox Code Playgroud)
Pra*_*aym 44
虽然第一种方法被提倡为"角度似的"方法,但我觉得这会增加开销.
考虑是否要在10个不同的控制器中使用此myservice.foo函数.我将不得不指定这个'myService'依赖项,然后在所有十个中指定$ scope.callFoo作用域属性.这只是一个重复,并以某种方式违反了DRY原则.
然而,如果我使用$ rootScope办法,我指定此全局函数gobalFoo只有一次,这将是我今后所有的控制器可用的,无论有多少.