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

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

我真正想要的是能够$watch父作用域中的表达式。如果我能做到这一点，那么我就可以在这里完成我想做的事情：AngularJS - 如何渲染带有变量的部分？ https://stackoverflow.com/questions/17863732/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?
                }
            }
        }
    };
});

See AngularJS 中的范围原型/原型继承有哪些细微差别？ https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs

总结一下：指令访问其父指令的方式（$parent) 范围取决于指令创建的范围类型：

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

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

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

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

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

您无法访问指令的编译函数中的范围（如此处所述：https://github.com/angular/angular.js/wiki/Dev-Guide:-理解指令 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（隔离范围），请使用以下命令观察您为指令属性指定的名称@ or =符号：

<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() { ... });