我可以在角每个控制器能够使用的功能?(Can I make a function available

2019-07-20 08:42发布

如果我有一个效用函数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 $ scope属性。 这是一个简单的重复,并以某种方式违反了DRY原则。

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



Answer 4:

AngularJs有“ 服务 ”和“ 工厂 ”只是问题,如yours.These用于有东西控制器,指令,其他服务或 ..你可以定义函数,存储数据的任何其他angularjs组件之间的全球性,使计算功能或任何你希望内部服务和AngularJs组件使用它们作为全球 。像

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

如果您需要更多

查找更多关于为什么我们需要AngularJs服务和工厂



Answer 5:

我有点新的角度来,但我发现有用的做(和非常简单的)是我,我需要反正在所有页面访问全局变量本地脚本之前提出,我打开一个全局脚本到我的网页。 在该脚本,我创建了一个名为“globalFunctions”的对象,并补充说,我需要全局访问作为属性的功能。 例如globalFunctions.foo = myFunc(); 。 然后,在每一个地方的脚本,我写了$scope.globalFunctions = globalFunctions; 我即刻访问我加入globalFunctions对象在全局脚本中的任何功能。

这是一个有点变通办法的,我不知道它可以帮助你,但它肯定帮助了我,因为我有很多的功能,这是一个痛苦将他们全部的每一页。



文章来源: Can I make a function available in every controller in angular?