angularjs - 如何从 AngularJS 中的自定义指令 * 具有自己的作用域 * 访问父作用域？

Question

我正在寻找访问指令中“父”范围的任何方式。范围、嵌入、要求、从上面传入变量(或范围本身)等的任何组合。我完全愿意竭尽全力，但我想避免一些完全hacky或无法维护的东西。例如，我知道我现在可以通过从 preLink 参数中获取 $scope 并迭代它的 $sibling 范围来查找概念上的“父”来做到这一点。

我真正想要的是能够$watch父作用域中的表达式。如果我能做到这一点，那么我就可以在这里完成我想做的事情: AngularJS - How to render a partial with variables?

一个重要的注意事项是该指令必须可以在同一父范围内重复使用。因此，默认行为(范围: false)对我不起作用。我需要指令的每个实例都有一个单独的作用域，然后我需要 $watch 位于父作用域中的变量。

一个代码示例相当于 1000 个单词，因此:

app.directive('watchingMyParentScope', function() {
    return {
        require: /* ? */,
        scope: /* ? */,
        transclude: /* ? */,
        controller: /* ? */,
        compile: function(el,attr,trans) {
            // Can I get the $parent from the transclusion function somehow?
            return {
                pre: function($s, $e, $a, parentControl) {
                    // Can I get the $parent from the parent controller?
                    // By setting this.$scope = $scope from within that controller?

                    // Can I get the $parent from the current $scope?

                    // Can I pass the $parent scope in as an attribute and define
                    // it as part of this directive's scope definition?

                    // What don't I understand about how directives work and
                    // how their scope is related to their parent?
                },
                post: function($s, $e, $a, parentControl) {
                    // Has my situation improved by the time the postLink is called?
                }
            }
        }
    };
});

Answer 1

参见What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

总结一下:指令访问其父级 ($parent) 作用域的方式取决于指令创建的作用域类型:

1. default (scope: false) - 该指令不会创建新的作用域，因此这里没有继承。该指令的范围与父级/容器的范围相同。在链接函数中，使用第一个参数(通常为 scope)。

2. scope: true - 该指令创建一个新的子作用域，该子作用域原型(prototype)继承自父作用域。在父作用域中定义的属性可用于指令 scope (由于原型(prototype)继承)。请注意写入原始范围属性 - 这将在指令范围上创建一个新属性(隐藏/隐藏同名的父范围属性)。

3. scope: { ... } - 该指令创建一个新的隔离/隔离范围。它通常不会继承父作用域。您仍然可以使用 $parent 访问父作用域，但通常不建议这样做。相反，您应该通过使用该指令的同一元素上的附加属性(使用 =、@ 来指定该指令需要哪些父作用域属性(和/或函数)) , 和 & 表示法。

4. transinclude: true - 该指令创建一个新的“嵌入”子作用域，其原型(prototype)继承自父作用域。如果该指令还创建了隔离作用域，则嵌入作用域和隔离作用域是同级作用域。每个作用域的 $parent 属性引用相同的父作用域。
   Angular v1.3 更新:如果指令还创建隔离作用域，则嵌入的作用域为现在是隔离范围的子级。嵌入范围和隔离范围不再是同级范围。嵌入范围的 $parent 属性现在引用隔离范围。

上面的链接包含所有 4 种类型的示例和图片。

您无法访问指令的编译函数中的范围(如此处所述: https://github.com/angular/angular.js/wiki/Dev-Guide:-Understanding-Directives )。您可以在链接函数中访问指令的范围。

观看:

对于上面的 1. 和 2.:通常您通过属性指定指令需要哪个父属性，然后 $watch 它:

<div my-dir attr1="prop1"></div>

scope.$watch(attrs.attr1, function() { ... });

如果您正在观察对象属性，则需要使用 $parse:

<div my-dir attr2="obj.prop2"></div>

var model = $parse(attrs.attr2);
scope.$watch(model, function() { ... });

对于上面的 3.(隔离范围)，请注意使用 @ 或 = 表示法为指令属性指定的名称:

<div my-dir attr3="{{prop3}}" attr4="obj.prop4"></div>

scope: {
  localName3: '@attr3',
  attr4:      '='  // here, using the same name as the attribute
},
link: function(scope, element, attrs) {
   scope.$watch('localName3', function() { ... });
   scope.$watch('attr4',      function() { ... });