从控制台（Chrome或Firefox）访问Angular控制器

Question

我附上了一张图片，显示了我想从Chrome控制台运行的点击操作，以及传递的各种值。在检查元素中，灰色高亮显示了按钮，savePublish()函数是我想要学习如何访问/使用的函数。

该按钮元素位于一个<div ng-controller="ProductEditCtrl as ctrl" .. >容器内，但页面上当然还有其他别名为ctrl的控制器包装器。

我的问题是，如何直接从Chrome控制台访问savePublish()方法？另外一个奖励问题的答案是，如何加载ProductEditCtrl控制器，然后在不同的页面上调用savePublish方法？

- Oliver Williams

---

可能是如何使用AngularJS在浏览器控制台中访问$scope变量？的重复问题。 - Matej Marconak

根据您的背景和调试偏好，您也可以使用控制台中的脚本调试工具，在代码中设置断点并检查每个阶段每个变量的确切情况。有时比记录所有内容到控制台更容易。 - LouisK

Answer 1

尝试使用angular.element($0).scope()检查按钮的scope，或者您可以使用像ng-inspector这样的Chrome扩展程序。

- Itsik Mauyhas

---

https://chrome.google.com/webstore/detail/angularjs-inspector/gjhmfjbfdbeeekiijofbikifokdkfhcc - 比ng-inspector更好的工具。 - Itsik Mauyhas

我在检查面板中看到了$0; $0是因为该元素被突出显示吗？ - Oliver Williams

是的，被检查的 元素。 - Itsik Mauyhas

Answer 2

你可以通过使用angular.element根据元素的类名在Chrome控制台上找到一个控制器。例如：

angular.element(document.querySelector(".btn.btn-primary")).controller()

如果在该元素上有可用的相关方法/函数，它们将被返回。

- Reena Verma