I'm inspecting the DOM on an Angular application and seeing a simple link such as the following:
我正在检查一个有棱角的应用程序上的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();
Unfortunately I'm getting draft is not defined
when trying to access it through the console. The link works perfectly fine itself though.
我想尝试通过简单地粘贴draft.resetRoster()将此处的ng-click命令直接调用到浏览器控制台;不幸的是,在试图通过控制台访问draft时没有定义。不过,这个链接本身也很好。
What's the best way to access/invoke the code that the ng-click
attribute is referencing here?
访问/调用此处引用的ng-click属性的代码的最佳方式是什么?
2 个解决方案
#1
2
ng-click
just registers a click event only so you could literally fire a click event from console by selecting the element. Example:-
ng-click只注册一个单击事件,因此您可以通过选择元素从控制台触发单击事件。例子:-
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, i.e
如果您希望看到在DOM中反映的更改,您需要调用scope.$apply()手动,即。
var scope = angular.element(elementRefGotFromOneOfTheAboveWays).scope();
scope.draft.resetRoster();
scope.$apply();
#2
1
Using Chrome, install the angular batarang extension, then simply right click on the element, click "Inspect element" and in the console type:
使用Chrome,安装角型batarang扩展,只需右键点击元素,点击“Inspect element”,在控制台类型:
$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()
#1
2
ng-click
just registers a click event only so you could literally fire a click event from console by selecting the element. Example:-
ng-click只注册一个单击事件,因此您可以通过选择元素从控制台触发单击事件。例子:-
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, i.e
如果您希望看到在DOM中反映的更改,您需要调用scope.$apply()手动,即。
var scope = angular.element(elementRefGotFromOneOfTheAboveWays).scope();
scope.draft.resetRoster();
scope.$apply();
#2
1
Using Chrome, install the angular batarang extension, then simply right click on the element, click "Inspect element" and in the console type:
使用Chrome,安装角型batarang扩展,只需右键点击元素,点击“Inspect element”,在控制台类型:
$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()