我可以在每个角度控制器中使用一个功能吗?

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

  • 在第一个解决方案中,如果有大量的`foo()函数会怎样?为它们中的每一个创建一个`$ scope.callFoo()`包装器是太多的工作.如何*将*库的所有函数"附加"到范围内,以便可以在模板中使用它?我有一个大的单位转换库,我希望它可以在我的模板上使用. (5认同)
  • 我的问题也是.我尝试了这个并且它可以工作:你可以通过说'$ scope.callFoo = myService.foo;`代替在你想要使用它的每个地方创建一个新的包装器来"附加"它. (3认同)

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)

  • 我认为这应该是正确的答案,@Praym的答案证明了这一点.在10个不同的控制器中指定服务依赖是没有意义的. (7认同)

Pra*_*aym 44

虽然第一种方法被提倡为"角度似的"方法,但我觉得这会增加开销.

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

然而,如果我使用$ rootScope办法,我指定此全局函数gobalFoo只有一次,这将是我今后所有的控制器可用的,无论有多少.

  • 这是评论而不是答案 (10认同)
  • 控制器"记录"他们获得全球服务呼叫的位置可能有一些价值.如果你是将一个控制器放入另一个应用程序中,那么全局函数的来源就不那么清楚了.我听说你认识到了你的论点. (5认同)