角1.x在指令模板体中消耗外部范围

Question

给定具有隔离作用域的第三方指令tpd (为参数起见，关闭源)，以下面的标记为例：

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

这将输出与以下类似的内容：

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

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

另一个例子是尝试调用外部作用域的函数(something事件)：

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

Answer 1

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

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

类似地，$parent.functionToCall(args)将调用父作用域方法。

Answer 2

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

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

我说了这些。因为使用$parent是一个反模式和不良架构的标志。

__

除了您的注释之外，如果新的孤立作用域是由于ngIf造成的，则可以为您的$parent作用域使用控制器。

__

一个装饰师的例子；

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

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

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