社区首页 >问答首页 >我可以在angular的每个控制器中使用一个函数吗？

问我可以在angular的每个控制器中使用一个函数吗？
EN

Stack Overflow用户

提问于 2013-02-22 14:05:20

回答 5查看 145.3K关注 0票数 191

如果我有一个实用函数foo，我希望能够从ng-app声明中的任何地方调用它。有没有什么方法可以让它在我的模块设置中全局访问，或者我需要将它添加到每个控制器的作用域？

angularjs

function

global

回答 5

Stack Overflow用户

回答已采纳

发布于 2013-02-22 14:29:38

您基本上有两个选择，要么将其定义为服务，要么将其放在根范围内。我建议你用它做一个服务，以避免污染根作用域。您可以创建一个服务，并使其在控制器中可用，如下所示：

<!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()，而不必将其从控制器传递给模板。

票数 291

Stack Overflow用户

发布于 2014-07-12 15:55:14

我猜你也可以把它们组合起来：

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