Question

有没有办法通过Chrome的控制台找到元素的控制器？我可以通过选择 Elements Panel 中的元素并使用

来获取对该组件的引用

var c = angular.element($0);

c有controller属性（看起来像构造函数），但我不知道该如何处理。有没有办法从这里找到控制器的名字？

Answer 1

如果您执行angular.element($0).scope()或$scope（如果您安装了Batarang Chrome扩展程序），您应该能够访问所选元素的范围的功能和属性。这还应该包括控制器在范围上公开的任何函数/属性。

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

Answer 2

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

@(f.FormGroup().TextBoxFor(m => m.EquipmentItem.Fields[field.Key].FieldValue)
 .Id(field.Key.ID.ToString()).HtmlAttributes(new { @Name = name, @class = "dynamicField" })
 .WidthLg(formWidth).Append(Html.Bootstrap().Button().Id("ipAddrWebPageButton")
 .Text(buttonText)).Label().LabelText(field.Key.Name).ShowRequiredStar(field.Key.Required))

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已经指出你可以使用jqLite额外方法angular.element(element).controller(componentName)：

[它]检索当前元素或其父元素的控制器。默认情况下，检索与ngController指令关联的控制器。如果name作为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()

Answer 5

如果您只是想找出什么是控制器（而不是在您的代码中使用它，也许只是在控制台中使用它）：

运行angular.element(element).controller().constructor

在控制台中，并且如果该函数已命名，则应该可以看到该名称。（如@jusopi所述）

即使不是，即使您使用的是chrome devtools（可能还有其他工具），也可以 右键单击 返回的无名函数，然后< / p>

在右键菜单中选择“ 显示功能定义”

这将带您到定义它的源代码中，并从上下文中了解它是什么控制器，其中定义了什么功能等。

Element的Angular Get Controller

5 个答案: