从浏览器控制台调用Angular click事件

Question

我正在检查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?">

我想尝试通过简单地将draft.resetRoster();粘贴到此处来在浏览器控制台中直接调用ng-click命令draft.resetRoster(); 不幸的draft is not defined ，尝试通过控制台访问draft is not defined时，我draft is not defined 。 链接本身可以很好地工作。

访问/调用ng-click属性在此引用的代码的最佳方法是什么？

Answer 1

ng-click仅注册一个click事件，因此您可以通过选择元素从控制台实际触发click事件。 例：-

假设您的按钮可以被所有这些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();

或者您可以使用扩展名（如batarang（chrome））直接访问范围或使用来获取元素的范围

angular.element(elementRefGotFromOneOfTheAboveWays).scope().draft.resetRoster();`

如果您想查看DOM中反映的更改，则需要手动调用scope.$apply() ，即

var scope = angular.element(elementRefGotFromOneOfTheAboveWays).scope();
scope.draft.resetRoster();
scope.$apply();

Answer 2

使用Chrome安装角度batarang扩展程序 ，然后右键单击元素，单击“检查元素”，然后在控制台中输入：

$scope.draft.resetRoster()

如果您要在角度服务中有要调用的方法，则可以执行以下操作来访问该服务：

service = angular.element(document).injector().get('NameOfServiceHere')
service.somePropertyOrMethod()