Angular 指令的隔离范围上的可选双向绑定

Posted 2023-02-26

【中文标题】Angular 指令的隔离范围上的可选双向绑定

【英文标题】：Optional two-way binding on isolate scope for Angular Directive

【发布时间】：2015-01-04 10:22:30

【问题描述】：

问题

我刚刚了解到您可以通过以下方式进行可选的“反向”或回调绑定：

scope:  parentScopeFunc: '&?' 

我正在尝试查看是否有一种方法可以使用 2 向绑定执行类似的操作。

scope:  optional2WayBoundProp: '=?' 

我尝试使用链接函数的 element 和 attrs 参数，但后来我失去了与父级的双向绑定。该方法只允许父子更新。那我还不如直接使用@作用域机制。

编辑

我发现了这个问题Angular JS directive, change a 2 way data binding in the link function，因此回答了关于=? 的主要问题。但是它不能解决“可选”非绑定值，例如 true 或 false。

目标

这是我想要完成的：

编写一个面板指令，该指令可以嵌入内容并且可以在标题区域之外折叠： <my-panel> <transcluded-header-content/> <button ng-click="toggleCollapse()"/> <transcluded-body-content ng-if="isExpanded"/> </my-panel>

在某些情况下，我想在父范围内缓存面板实例的折叠状态（因此视图控制器可以确定如何缓存此信息的 2 路绑定）： <my-panel is-expanded="parentScopeProp">

在其他情况下，我可能只想声明它而不绑定到父范围属性，或者我可能根本不声明它，在这种情况下它假定它已扩展。 <my-panel is-expanded="true/false">

我了解，通过使用 = 赋值，无法评估像 undefined、true 和 false 这样的表达式。

【参考方案1】：

'=?' 是从 ng 1.2.x 开始的有效范围分配...

...关于从可选的双向绑定中插入表达式的方法的能力，这仍然是可供选择的。