Javascript 角度1.x在指令模板体中使用外部范围

给定具有隔离作用域的第三方指令

tpd

（为参数起见，关闭源代码），以以下标记为例：

<div>
    <tpd>
        <div>{{tpdScopeField}}</div>
        <div>{{outerScopeField}}</div>
    </tpd>
    <div>{{outerScopeField}}</div>
</div>

{{tpdScopeField}}
{{outerScopeField}}
{{outerScopeField}}

这将输出类似于：

<div>
    <tpd>
        <div>tpdScopeFieldValue</div>
        <div></div>
    </tpd>
    <div>outerScopeFieldValue</div>
</div>

tpdScopeFieldValue
outerScopeFieldValue

如何与标记中的外部/父范围进行有效通信？

另一个示例是尝试调用外部作用域的函数（在事件上）：

<div>
    <tpd>
        <button ng-click="outerScopeEventHandler(someArgs)">Click me!</button>
    </tpd>
    <div>{{outerScopeField}}</div>
</div>

点击我！
{{outerScopeField}}

如果属性在父级中可用，则此代码将执行以下操作：

<div>
    <tpd>
        <div>{{tpdScopeField}}</div>
        <div>{{$parent.outerScopeField}}</div>
    </tpd>
    <div>{{outerScopeField}}</div>
</div>

{{tpdScopeField}}
{{$parent.outerScopeField}
{{outerScopeField}}

---

类似地，

$parent.functionToCall（args）

将调用父作用域方法。

如果属性在parent中可用，此代码将执行以下操作：

<div>
    <tpd>
        <div>{{tpdScopeField}}</div>
        <div>{{$parent.outerScopeField}}</div>
    </tpd>
    <div>{{outerScopeField}}</div>
</div>

{{tpdScopeField}}
{{$parent.outerScopeField}
{{outerScopeField}}

---

类似地，

$parent.functionToCall（args）

将调用父作用域方法。

也许您可以使用$parent来实现这一点。但我认为你不应该对$parent这样做。如果此指令tpd是第三方指令，则应使用

您可以使用decorator修改它。例如，可以向该指令添加另一个属性。您可以从父$scope传递自定义数据

我说了这些。因为使用$parent是一种反模式的行为，也是糟糕架构的标志

__

除了你的评论之外；如果新的隔离作用域是由ngIf引起的，则可以对$parent作用域使用controllerAs

__

装饰师的榜样

angular.module('yourApp')
  .config([ '$provide', function($provide) {
    $provide.decorator('tpd', ['$delegate', function($delegate) {
      var directive = $delegate[0];

      angular.extend(directive.scope, { 
          othervar: "=" 
      }); 

      return $delegate;  
    }]);
  }]);

---

也许你可以用$parent来做这件事。但我认为你不应该对$parent这样做。如果此指令tpd是第三方指令，则应使用

您可以使用decorator修改它。例如，可以向该指令添加另一个属性。您可以从父$scope传递自定义数据

我说了这些。因为使用$parent是一种反模式的行为，也是糟糕架构的标志

__

除了你的评论之外；如果新的隔离作用域是由ngIf引起的，则可以对$parent作用域使用controllerAs

__

装饰师的榜样

angular.module('yourApp')
  .config([ '$provide', function($provide) {
    $provide.decorator('tpd', ['$delegate', function($delegate) {
      var directive = $delegate[0];

      angular.extend(directive.scope, { 
          othervar: "=" 
      }); 

      return $delegate;  
    }]);
  }]);

---

你能提供一个装饰师的例子吗？你能提供一个装饰师的例子吗？看，我就是这么想的。但它是为领域而工作，而不是为功能而工作。你有一个有效的例子吗？在进一步尝试之后，我发现了我的问题（正如预期的那样适用于字段和函数）。如果在任何父元素上使用ng If，则会创建一个新的作用域，需要额外的

$parent.

前缀（eugh）。请看，这就是我的想法。但它是为领域而工作，而不是为功能而工作。你有一个有效的例子吗？在进一步尝试之后，我发现了我的问题（正如预期的那样适用于字段和函数）。如果在任何父元素上使用ng If，将创建一个新的作用域，需要额外的

$parent.

前缀（eugh）。