javascript - Angular 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>

如何在标记中与外部/父作用域进行有效通信？

另一个例子是尝试调用外部作用域的函数(在某些事件上):

<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) 将调用父作用域方法。