Question

我想在我的应用程序中共享这样的功能，我的工厂很少。问题是我必须在每个控制器中添加所有这些工厂。越来越多的工厂和工厂控制器这是一项繁琐的工作！

因此，我试图找到一种方法来减少这种冗余。在浏览SO时，我遇到了以下问题：

Can I make a function available in every controller in angular?

这就是我要找的，以下答案看起来最适合我：

https://stackoverflow.com/a/24714658/3375368

现在我想通过删除插入$rootScope的必要性来提前一步！

<!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', '$rootScope', function($scope, $rootScope){

            appData.foo() //This wont work
            $rootScope.appDate.foo() //This will work

            //Is there a way to remove dependancy on $rootScope??

        }]);

    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="appData.foo()">Call foo</button>
    <!-- This works, but I wont be using this, its from original post -->
</body>
</html>

另一个问题是这种方法是否合适？＆安培;它将如何影响工厂数据共享的工作，即是否有任何陷阱？

Answer 1

如果您的服务位于$rootScope，则可以从$scope访问这些服务。因此，无需在$rootScope上包含依赖项：

<!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){
            $scope.appData.foo() //This will work
        }]);

    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="appData.foo()">Call foo</button>
    <!-- This works, but I wont be using this, its from original post -->
</body>
</html>

但是，将所有内容加载到$rootScope上并不是一个好主意。 AngularJS的依赖注入系统存在是有原因的，但是如果你真的想要避免实际使用服务，那么你可以创建一个包含所有其他服务的聚合服务：

<!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.factory('allMyServices', ['myService', function (myService) {
            return {
                myService: myService
            };
        }]);
        myApp.controller('MainCtrl', ['$scope', 'allMyServices', function($scope, allMyServices){
            allMyServices.myService.foo() //This will work
        }]);

    </script>
</head>
<body ng-controller="MainCtrl">
</body>
</html>

AngularJS使用$ rootScope＆amp; amp;然后丢弃$ rootScope

1 个答案: