我有这样的服务:
angular.module('app').factory('ExampleService', function(){ this.f1 = function(world){ return 'Hello '+world; } return this; })
我想 test it from the JavaScript console 并调用该服务的函数 f1() .
f1()
我怎样才能做到这一点?
angular.element(document.body).injector().get('serviceName')
AngularJS使用 Dependency Injection (DI) 将服务/工厂注入您的组件,指令和其他服务 . 因此,获得服务需要做的是首先获得AngularJS的 injector (注入器负责连接所有依赖项并将它们提供给组件) .
要获得应用程序的 injector ,您需要从角度处理的元素中获取它 . 例如,如果您的应用程序在body元素上注册,则调用 injector = angular.element(document.body).injector()
injector = angular.element(document.body).injector()
从检索到的 injector ,您可以使用 injector.get('ServiceName') 获得您喜欢的任何服务
injector
injector.get('ServiceName')
有关此答案的更多信息:Can't retrieve the injector from angular甚至更多:Call AngularJS from legacy code
获取特定元素的 $scope 的另一个有用技巧 . 使用开发人员工具的 DOM inspection tool 选择元素,然后运行以下行( $0 始终是所选元素):angular.element($0).scope()
$scope
$0
angular.element($0).scope()
首先,您的服务的修改版本 .
var app = angular.module('app',[]); app.factory('ExampleService',function(){ return { f1 : function(world){ return 'Hello' + world; } }; });
这会返回一个对象,此处没有任何新内容 .
现在从控制台获取此功能的方法是
var $inj = angular.injector(['app']); var serv = $inj.get('ExampleService'); serv.f1("World");
你之前在那里做的事情之一是假设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() .
@JustGoscha 's answer is spot on, but that'在我想要访问时要输入很多内容,所以我将其添加到app.js的底部 . 然后我要输入的所有内容都是 x = getSrv('$http') 来获取http服务 .
x = getSrv('$http')
// @if DEBUG function getSrv(name, element) { element = element || '*[ng-app]'; return angular.element(element).injector().get(name); } // @endif
它将其添加到全局范围,但仅在调试模式下 . 我把它放在 @if DEBUG 里面,这样我就不会在 生产环境 代码中结束它了 . I use this method to remove debug code from prouduction builds.
@if DEBUG
Angularjs依赖注入框架负责将应用程序模块的依赖项注入控制器 . 这可以通过其注射器实现 .
您需要首先识别ng-app并获取相关的注射器 . 以下查询用于在DOM中查找ng-app并检索注入器 .
angular.element('*[ng-app]').injector()
但是,在chrome中,您可以指向目标ng-app,如下所示 . 并使用 $0 hack并发出 angular.element($0).injector()
angular.element($0).injector()
获得注入器后,获取任何依赖注入服务,如下所示
injector = angular.element($0).injector(); injector.get('$mdToast');
4 回答
TLDR:在一行中您正在寻找的命令:
深潜
AngularJS使用 Dependency Injection (DI) 将服务/工厂注入您的组件,指令和其他服务 . 因此,获得服务需要做的是首先获得AngularJS的 injector (注入器负责连接所有依赖项并将它们提供给组件) .
要获得应用程序的 injector ,您需要从角度处理的元素中获取它 . 例如,如果您的应用程序在body元素上注册,则调用
injector = angular.element(document.body).injector()
从检索到的
injector
,您可以使用injector.get('ServiceName')
获得您喜欢的任何服务有关此答案的更多信息:Can't retrieve the injector from angular
甚至更多:Call AngularJS from legacy code
获取特定元素的
$scope
的另一个有用技巧 . 使用开发人员工具的 DOM inspection tool 选择元素,然后运行以下行($0
始终是所选元素):angular.element($0).scope()
首先,您的服务的修改版本 .
a)
这会返回一个对象,此处没有任何新内容 .
现在从控制台获取此功能的方法是
b)
c)
你之前在那里做的事情之一是假设app.factory返回函数本身或它的新版本 . 事实并非如此 . 为了得到一个构造函数,你要么必须这样做
这将返回一个ExampleService构造函数,接下来您必须执行“new”操作 .
或者,
这会在注入时返回新的ExampleService() .
@JustGoscha 's answer is spot on, but that'在我想要访问时要输入很多内容,所以我将其添加到app.js的底部 . 然后我要输入的所有内容都是
x = getSrv('$http')
来获取http服务 .它将其添加到全局范围,但仅在调试模式下 . 我把它放在
@if DEBUG
里面,这样我就不会在 生产环境 代码中结束它了 . I use this method to remove debug code from prouduction builds.Angularjs依赖注入框架负责将应用程序模块的依赖项注入控制器 . 这可以通过其注射器实现 .
您需要首先识别ng-app并获取相关的注射器 . 以下查询用于在DOM中查找ng-app并检索注入器 .
但是,在chrome中,您可以指向目标ng-app,如下所示 . 并使用
$0
hack并发出angular.element($0).injector()
获得注入器后,获取任何依赖注入服务,如下所示