如果我有一个实用函数foo,我希望能够从ng- app声明中的任何位置调用它。有没有办法可以在我的模块设置中使其全局可访问,或者我是否需要将它添加到每个控制器的范围中?
foo
ng- app
您基本上有两个选择,要么将其定义为服务,要么将其放在您的根范围内。我建议您使用它来提供服务以避免污染根范围。您创建一个服务并使其在您的控制器中可用,如下所示:
<!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(),而无需从控制器将其传递给模板。
globalFoo()