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?">

我想通过简单地粘贴ng-click来尝试直接在浏览器控制台中调用draft.resetRoster();命令。不幸的是，当我尝试通过控制台访问它时，我得到draft is not defined。虽然链接工作完全正常。

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

Answer 1

ng-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，安装angular batarang extension，然后只需右键单击该元素，点击“Inspect element”，然后在控制台中输入：

String.Format("{0}\t{1}\t...", table[row][0],table[row][1],...)

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

$scope.draft.resetRoster()

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

2 个答案: