我有这样的服务:
angular.module('app').factory('ExampleService', function(){
this.f1 = function(world){
return 'Hello '+world;
}
return this;
})
我想从JavaScript控制台测试它,并调用服务的函数f1()。
我该怎么做呢?
我有这样的服务:
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中,这样我就不会在产品代码中使用它。我使用这种方法从生产版本中删除调试代码。