Element的Angular Get Controller

Question

有没有办法通过Chrome的控制台找到元素的控制器？我可以通过选择Elements面板中的元素并使用来获得对组件的引用

var c = angular.element($0);

c有一个controller属性(看起来像一个构造函数),但我不知道该怎么做.有没有办法从这里找到控制器的名称？

Answer 1

如果您这样做angular.element($0).scope()或只是$scope(如果您安装了Batarang Chrome扩展程序),您应该能够访问所选元素的作用域的功能和属性.这还应包括控制器在作用域上公开的任何函数/属性.

但是,无法获得控制器的名称.

Answer 2

假设您没有为控制器使用匿名函数,您可以使用以下内容:

angular.element(element).controller().constructor.name

codepen - http://codepen.io/jusopi/pen/jWYWzv?editors=101

至少从Angular 1.2.27开始,根据他们的文档,你可以做到这一点.查看JQLite Extras Method部分 - https://docs.angularjs.org/api/ng/function/angular.element

Answer 3

正如@jusopi已经指出的那样，您可以使用jqLit​​e额外的方法 angular.element(element).controller(componentName)：

[It]检索当前元素或其父元素的控制器。默认情况下，检索与ngController指令关联的控制器。如果提供名称作为camelCase指令名称，则将检索该指令的控制器

如果在camelCase中提供指令/组件名称，则还可以在所选元素中获取所有指令/组件的特定控制器：

angular.element($0).controller('MyComponent')

（$ 0表示元素检查器中的最新选择）

Answer 4

这适用于Angular 1.5的组件

假设您有一个名为的组件ProductViewComponent，该组件由处理ProductViewController，那么获取控制器很容易：

angular.element("product-view").controller("productView")

备注：

• 注意元素名称中的小写字母和破折号
• 和小写，并且控制器文本中没有“ Controller”后缀

例子

现在您可以使用它，例如调用方法：

angular.element("product-view").controller("productView").hasProducts();

或调用动作！

angular.element("product-view").controller("productView").products = [ 'abc' ]
angular.element("product-view").scope().$apply()