多级指令中的“$ parent”

Question

我想了解a working code。它可以通过GUI逐个添加name:value pairs来构建一个非常简单的json数据;通过自定义指令及其链接功能，它构建了一个html模板作为下图的右手：

让我感到困惑的是突出显示部分中的ng-model="$parent.keyName"，以及其他部分中的$parent.valueType，ng-model="$parent.valueName"。

1）$parent引用了什么（在代码中或上图中的示例中）？

2）有没有办法在控制台中显示$parent或$parent.keyName的价值，或者在程序中添加内容（例如alert）？

Answer 1

  

这个$ parent引用了什么？

Parent指父控制器的范围。您问题中的图片没有给出清晰的图片，因此我将为其添加一个示例。

<div ng-controller="EditorController">
    <div ng-controller="ChildEditorController">
        ....
    </div>
</div>

假设您在EditorController中有一个名为editorsList（array）的属性（这里是父控制器），您可以执行类似

的操作

<div ng-controller="EditorController">
    <div ng-controller="ChildEditorController">
        Editors Count: {{$parent.editorsList.length}}
    </div>
</div>

因此，您可以使用$ parent访问父级的范围。

Answer 2

1）$parent指父范围（任何给定范围）。除$rootScope之外，所有范围都有父级，这是最高级别的范围。它们可以由任何角度ng-*指令创建，包括但不限于ng-controller。

一般来说，使用$parent被认为是不好的做法，因为它指的是立即父作用域，它可能会发生变化。如果范围层次结构确实发生了变化（例如，它可以通过向自定义指令模板中保存的html元素添加ng-*指令来实现），那么层次结构可能会被破坏而$parent将不会引用和以前一样的范围。

2）是的，你可以。在Chrome开发者工具中，如果您Right Click > Inspect Element（如屏幕截图所示），则选择该元素。然后，如果您突出显示该元素并转到控制台选项卡并键入：

angular.element($0).scope()

返回所选元素所在的范围。然后键入：

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

返回所选元素所在范围的父范围。对于它的价值，你也可以这样做：

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

并继续上升范围层次结构。

另请查看 AngularJS Batarang Chrome扩展程序，该扩展程序可让您查看Chrome开发者工具中的范围。