192

如果我有一个实用函数foo，我希望能够从ng-app声明中的任何位置调用它。有没有办法可以在我的模块设置中使其全局可访问，或者我是否需要将它添加到每个控制器的范围中？

4

5 回答 5

292

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

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

于 2013-02-22T14:29:37.990 回答
54

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

<!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>
于 2014-07-12T15:55:14.263 回答
45

虽然第一种方法被提倡为“类似角度的”方法，但我觉得这会增加开销。

考虑一下我是否想在 10 个不同的控制器中使用这个 myservice.foo 函数。我将必须指定这个“myService”依赖项，然后在所有十个中指定 $scope.callFoo 范围属性。这只是一个重复，并且在某种程度上违反了 DRY 原则。

然而，如果我使用 $rootScope 方法，我只指定这个全局函数 gobalFoo 一次，它将在我未来的所有控制器中可用，无论有多少。

于 2013-12-19T23:33:23.757 回答
4

AngularJs 有“服务”和“工厂”只是为了解决像你这样的问题。这些用于在控制器、指令、其他服务或任何其他 angularjs 组件之间具有全局性。你可以定义函数、存储数据、创建计算函数或任何你想要的东西想要内部服务并在 AngularJs 组件中使用它们作为Global .like

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

如果你需要更多

了解更多关于我们为什么需要 AngularJs 服务和工厂的信息

于 2016-04-27T21:50:26.650 回答
0

我对 Angular 有点新，但我发现有用（而且非常简单）的是我制作了一个全局脚本，我在本地脚本之前加载到我的页面上，其中包含我需要在所有页面上访问的全局变量。在该脚本中，我创建了一个名为“globalFunctions”的对象，并添加了我需要全局访问的函数作为属性。例如globalFunctions.foo = myFunc();。然后，在每个本地脚本中，我编写$scope.globalFunctions = globalFunctions;并立即可以访问我添加到全局脚本中的 globalFunctions 对象的任何函数。

这是一种解决方法，我不确定它是否对您有帮助，但它肯定对我有帮助，因为我有很多功能，将所有功能添加到每个页面是很痛苦的。

于 2017-07-25T01:54:11.183 回答