Question

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

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

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

Answer 3

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

考虑是否要在10个不同的控制器中使用此myservice.foo函数。我将不得不指定这个'myService'依赖项，然后在所有十个中指定$ scope.callFoo作用域属性。这只是一个重复，并以某种方式违反了DRY原则。

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

Answer 4

AngularJs只针对像你这样的问题有“服务”和“工厂”。这些用于控制器，指令，其他服务之间的全局或任何其他angularjs组件 ..您可以在服务中定义函数，存储数据，计算函数或任何您想要的函数，并在AngularJs组件中将它们用作全局。像

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

如果您需要更多

Find More About Why We Need AngularJs Services and Factories

Answer 5

我对Angular有点新，但我觉得有用（而且非常简单）是我创建了一个全局脚本，我在本地脚本之前加载到我的页面上，我需要访问全局变量无论如何页面。在那个脚本中，我创建了一个名为＆＃34; globalFunctions＆＃34;并添加了我需要作为属性全局访问的功能。例如globalFunctions.foo = myFunc();。然后，在每个本地脚本中，我写了$scope.globalFunctions = globalFunctions;，我立即可以访问我在全局脚本中添加到globalFunctions对象的任何函数。

这是一个解决方法，我不确定它对你有什么帮助，但它确实帮助了我，因为我有很多功能，并且很难将所有功能添加到每个页面。

我可以在角度控制器中为每个控制器提供一个功能吗？

5 个答案: