我有这样的服务:

angular.module('app').factory('ExampleService', function(){
  this.f1 = function(world){
    return 'Hello '+world;
  }
  return this;
})

我想从JavaScript控制台测试它,并调用服务的函数f1()。

我该怎么做呢?


当前回答

Angularjs依赖注入框架负责将应用模块的依赖注入到控制器中。这可以通过注入器实现。

你需要首先识别ng-app并获取相关的注入器。 下面的查询可以在DOM中找到你的ng-app并检索注入器。

angular.element('*[ng-app]').injector()

然而,在chrome中,你可以指向目标ng-app,如下所示。然后使用$0攻击并发出angular.element($0).injector()

一旦你有了注入器,获得任何依赖注入服务,如下所示

injector = angular.element($0).injector();
injector.get('$mdToast');

其他回答

TLDR:在一行中您正在寻找的命令:

angular.element(document.body).injector().get('serviceName')

深潜水

AngularJS使用依赖注入(DI)将服务/工厂注入到组件、指令和其他服务中。所以你需要做的是首先获取AngularJS的注入器(注入器负责连接所有依赖项并将它们提供给组件)。

要获得应用的注入器,你需要从angular正在处理的元素中获取它。例如,如果你的应用注册在body元素上你调用injector = angular.element(document.body).injector()

从检索到的注入器中,你可以使用injector.get('ServiceName')获取任何你想要的服务

在这个答案中有更多的信息:不能从angular中检索注入器 这里还有更多:从遗留代码调用AngularJS


获取特定元素的$scope的另一个有用技巧。 使用开发工具的DOM检查工具选择元素,然后运行以下行($0始终是选中的元素): angular.element .scope (0) ()

首先,您的服务的修改版本。

a )

var app = angular.module('app',[]);

app.factory('ExampleService',function(){
    return {
        f1 : function(world){
            return 'Hello' + world;
        }
    };
});

这返回一个对象,这里没有new。

从控制台获取这个的方法是

b )

var $inj = angular.injector(['app']);
var serv = $inj.get('ExampleService');
serv.f1("World");

c )

你之前在那里做的一件事是假设app.factory返回给你函数本身或它的新版本。事实并非如此。为了得到一个构造函数,你必须

app.factory('ExampleService',function(){
        return function(){
            this.f1 = function(world){
                return 'Hello' + world;
            }
        };
    });

这将返回一个ExampleService构造函数,接下来你必须对它进行“new”操作。

或者,

app.service('ExampleService',function(){
            this.f1 = function(world){
                return 'Hello' + world;
            };
    });

它在注入时返回新的ExampleService()。

Angularjs依赖注入框架负责将应用模块的依赖注入到控制器中。这可以通过注入器实现。

你需要首先识别ng-app并获取相关的注入器。 下面的查询可以在DOM中找到你的ng-app并检索注入器。

angular.element('*[ng-app]').injector()

然而,在chrome中,你可以指向目标ng-app,如下所示。然后使用$0攻击并发出angular.element($0).injector()

一旦你有了注入器,获得任何依赖注入服务,如下所示

injector = angular.element($0).injector();
injector.get('$mdToast');

@JustGoscha的答案是正确的,但当我想访问时,这是很多类型,所以我把它添加到我的app.js的底部。然后我需要输入x = getSrv('$http')来获得http服务。

// @if DEBUG
function getSrv(name, element) {
    element = element || '*[ng-app]';
    return angular.element(element).injector().get(name);
}
// @endif

它将其添加到全局作用域,但仅在调试模式下添加。我把它放在@if DEBUG中,这样我就不会在产品代码中使用它。我使用这种方法从生产版本中删除调试代码。