javascript - 为什么从外部 Angular 调用的服务不是单例？

Question

我正在开发一个项目，我需要从 Angular 服务外部访问服务。不幸的是，从 Angular 外部检索的服务似乎与应用程序内部的实例不同。事实上，每次我调用它时它都是一个新实例。我在下面创建了一个示例来演示该问题。

<div ng-controller="controller">
    <div>
        <span ng-bind="count"></span>
        <input type="button" value="Inside" ng-click="inc()"></input>
    </div>
    <div>
        <span id="outside-count">0</span>
        <input type="button" value="Outside" onclick="outside()"></input>
    </div>
</div>

还有 JavaScript...

angular.module('Services', [])
.service('svc', function() {
    var svc = {
        count: 0,
        increment: function(){svc.count++;}
    };
    return svc;
});

angular.module('MyApp', ['Services'])
.controller('controller', ['$scope', 'svc', function($scope, svc) {
    $scope.count = svc.count;
    $scope.inc = function() {
        svc.increment();
        $scope.count = svc.count;
    };
}]);

var outside = function() {
    var svc = angular.injector(['ng', 'Services']).get('svc');
    svc.increment();
    angular.scope().$apply();
    document.getElementById('outside-count').innerHTML = svc.count;
};

我期望的是外部计数按钮将增加与我在 ng-controller 中获得的相同的服务对象。但是，它每次都会获取一个新实例，因为连续单击该按钮始终显示 1。 “内部”按钮继续按预期增加单个服务。

我应该从外部 Angular 访问服务以获取服务的单例实例吗？

Here is a fiddle上面的代码。

Answer 1

Angular 中的服务是单例，因为每个注入(inject)器仅创建一次服务。

angular.injector 但是创建了一个新的注入(inject)器函数。

您需要获取当前应用程序注入(inject)器:angular.element(domElement).injector()

演示:http://jsfiddle.net/BsLK8/

内部保持同步的演示:http://jsfiddle.net/kW2BC/