[英]Invoking an Angular click event from browser console
I'm inspecting the DOM on an Angular application and seeing a simple link such as the following: 我正在检查Angular应用程序上的DOM,并看到一个简单的链接,如下所示:
<button type="button" class="button mini text right clear-all" ng-show="draft.roster.slotsFilled" ng-click="draft.resetRoster()" really="Are you sure you want to clear all players from your team?">
I wanted to try to invoke the ng-click
command here directly into the browser console by simply pasting draft.resetRoster();
我想尝试通过简单地将
draft.resetRoster();
粘贴到此处来在浏览器控制台中直接调用ng-click
命令draft.resetRoster();
Unfortunately I'm getting draft is not defined
when trying to access it through the console. 不幸的
draft is not defined
,尝试通过控制台访问draft is not defined
时,我draft is not defined
。 The link works perfectly fine itself though. 链接本身可以很好地工作。
What's the best way to access/invoke the code that the ng-click
attribute is referencing here? 访问/调用
ng-click
属性在此引用的代码的最佳方法是什么?
ng-click
just registers a click event only so you could literally fire a click event from console by selecting the element. ng-click
仅注册一个click事件,因此您可以通过选择元素从控制台实际触发click事件。 Example:- 例:-
Say your button can be uniquely identified by all these css classes, you could do: 假设您的按钮可以被所有这些CSS类唯一标识,则可以执行以下操作:
//You could use jquery as well if it is available, here some vanilla accessors.
document.querySelector('.button.mini.text.right.clear-all').click();
//If you have multiple, use querySelectorAll and
//select the respective element or if you have an Id:
document.getElementById('#myButton').click();
or you can use extensions like batarang (chrome) to access the scope directly or get the scope of the element using 或者您可以使用扩展名(如batarang(chrome))直接访问范围或使用来获取元素的范围
angular.element(elementRefGotFromOneOfTheAboveWays).scope().draft.resetRoster();`
and if you want to see change reflected in DOM you would need to call scope.$apply()
manually, ie 如果您想查看DOM中反映的更改,则需要手动调用
scope.$apply()
,即
var scope = angular.element(elementRefGotFromOneOfTheAboveWays).scope();
scope.draft.resetRoster();
scope.$apply();
Using Chrome, install the angular batarang extension , then simply right click on the element, click "Inspect element" and in the console type: 使用Chrome安装角度batarang扩展程序 ,然后右键单击元素,单击“检查元素”,然后在控制台中输入:
$scope.draft.resetRoster()
If you have methods in an angular service that you'd like to call, you can access the service by doing: 如果您要在角度服务中有要调用的方法,则可以执行以下操作来访问该服务:
service = angular.element(document).injector().get('NameOfServiceHere')
service.somePropertyOrMethod()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.