从浏览器控制台调用 Angular 控制器函数答案

【问题标题】：Calling Angular Controller Function from Browser Console从浏览器控制台调用 Angular 控制器函数
【发布时间】：2014-05-12 19:15:11
【问题描述】：

是否可以从控制台（Chrome 开发者工具控制台）调用 AngularJS 控制器功能？

例如

app.controller('AddCtrl', ['$scope', function ($scope) {



    $scope.save = function(){
        // do stuff here - call it from console
    };

}]);

【问题讨论】：

标签： angularjs

【解决方案1】：

是的，您只需要使用angular.element 来获取控制器范围内的元素：

angular.element("yourElement").scope().save();

【讨论】：

什么是“yourElement” - 控制器？
这是一个在控制器范围内的元素，所以<body ng-controller="yourController"><div id="someElem"></div></body> - ID someElem 的 div 在范围内，所以你可以这样做：angular.element("someElem").scope() - 请参阅指南了解更多信息： docs.angularjs.org/api/ng/function/angular.element
hm...我的身体没有ng-controller 属性。使用ng-view时是否适用相同的规则？
你的控制器是在哪里定义的？
在配置中，.when("/add", { controller: "AddCtrl", templateUrl: "views/add.html" })

【解决方案2】：

打开浏览器开发者控制台。检查注入控制器的元素。执行以下操作：

angular.element($0).scope().save()

$0 是您当前在开发者控制台元素面板中选择的元素。

【讨论】：

【解决方案3】：

如果你只使用 angular 而不是 jquery，你可以做类似angular.element(document.getElementById('yourElement')).scope().save();

如果您同时使用 angular 和 jquery，则可以执行 angular.element($('#yourElement')).scope().save(); 假设您的元素的 id 属性设置如下 <div id=yourElement></div>

非常重要 但是作为noted here，如果您从控制台调用的函数执行了任何您希望更改显示在视图中的操作，那么您必须将它们传递给$apply()像这样

var scope = angular.element($('#story')).scope();
scope.$apply(function(){
  scope.showNextScene();
});

【讨论】：

谢谢，非常重要的最后一部分救了我！
@legas Angular 有一些愚蠢的怪癖。有时需要很长时间才能克服它们。

【解决方案4】：

您可以为开发者加载一个名为 AngularJS Batarang 的 Chrome 扩展程序。

它将向开发者控制台添加一个 AngularJS 选项卡。

在页面中选择一个元素，如果它有 $scope，它将显示在“Elements”右侧窗格中的“$scope”标签下.

【讨论】：

其他人提到如果jQuery可用，angular.element只是jQuery函数的别名。如果 jQuery 不可用，则 angular.element 委托给 Angular 的内置 jQuery 子集，称为“jQuery lite”或 jqLite。

【解决方案5】：

在 Chrome 检查器中单击与范围相关的元素到要执行的控制器。
类型 angular.element($0).scope().nameYourFunctionInScope();
执行

【讨论】：

在哪里输入？ ?
@LachezarRaychev 在控制台中