Question

我有一个需要收听广播事件的工厂。我将$scope注入了工厂，因此我可以使用$scope.$on。但是，只要我将$scope添加到参数列表中，我就会收到喷油器错误。

这很好用：

angular.module('MyWebApp.services')
    .factory('ValidationMatrixFactory', ['$rootScope', function($rootScope) {
        var ValidationMatrixFactory = {};
        return ValidationMatrixFactory;
    }]);

这会引发进样器错误：

angular.module('MyWebApp.services')
    .factory('ValidationMatrixFactory', ['$scope', '$rootScope', function($scope, $rootScope) {
        var ValidationMatrixFactory = {};
        return ValidationMatrixFactory;
    }]);

为什么我不能将$scope注入工厂？如果我不能，除了使用$rootScope之外，我有没有办法听取其他事件？

Answer 1

因为$ scope用于连接控制器以查看，所以工厂实际上并不打算使用$ scope。

您如何向rootScope广播。

$rootScope.$on()

Answer 2

即使您不能在服务中使用$ scope，您也可以将该服务用作“商店”。在ReactJS上开发应用程序时，我使用以下方法启发了AltJS / Redux。

我有一个Controller，其范围与视图绑定。该控制器具有$( "input[id][name*='Address.Line1'][name*='Address.Line2'][name*='Address.City'][name*='Address.StatesList'][name*='Address.CountryList'][name*='Address.PostalCode']")变量，该变量从具有$scope.state的服务获取其值。该服务是“允许”（由您，开发人员，这是我们应该遵循的规则）触及“州”的唯一组件。

一个例子可以使这一点更清晰

this.state = {}

(function () {
    'use strict';
    angular.module('app', ['app.accounts']);  
  
    // my module... 
    // it can be defined in a separate file like `app.accounts.module.js`
    angular.module('app.accounts', []);
 
    angular.module('app.accounts')
        .service('AccountsSrv', [function () {
            var self = this;

            self.state = {
                user: false
            };
            
            self.getAccountInfo = function(){
              var userData = {name: 'John'};   // here you can get the user data from an endpoint
              self.state.user = userData;      // update the state once you got the data
            };
        }]);
    
    // my controller, bound to the state of the service
    // it can be defined in a separate file like `app.accounts.controller.js`
    angular.module('app.accounts')
        .controller('AccountsCtrl', ['$scope', 'AccountsSrv', function ($scope, AccountsSrv) {
            $scope.state = AccountsSrv.state;
          
            $scope.getAccountInfo = function(){
                // ... do some logic here
                // ... and then call the service which will 
                AccountsSrv.getAccountInfo();
            }
        }]);
})();

这种方法的好处是您不必在多个地方设置<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script> <div ng-app="app"> <div ng-controller="AccountsCtrl"> Username: {{state.user.name ? state.user.name : 'user info not available yet. Click below...'}}<br/><br/> <a href="javascript:void(0);" ng-click="getAccountInfo()">Get account info</a> </div> </div>或$watch，或者每次需要更新控制器的状态时都会繁琐地调用$on。此外，您可以让多个控制器与服务进行通信，因为组件和服务之间的关系是一个控制器可以与一个或多个服务进行通信，因此决定权归您所有。这种方法专注于保持单一的事实来源。

我在大型应用程序中使用过这种方法......它就像魅力一样。

我希望它有助于澄清在哪里保持状态以及如何更新状态。

为什么我不能将$ scope注入Angular的工厂？

2 个答案: