javascript - ng-模型在 ng-transclude 中

Question

我在 ng-transclude 中使用 ng-model 时遇到问题。

由于 ng-transclude 创建子作用域，因此不能再将值设置为外部作用域。

没有 ng-transclude 一切正常:

{{text}}
<div>
  <textarea ng-model="text"></textarea>
</div>

使用 ng-transclude 文本不会更新，因为 textarea 只修改子范围:

{{text}}
<pane>
   <textarea ng-model="text"></textarea>
</pane>

http://plnkr.co/edit/GKf7WhnnItVNeBpvSB0F?p=preview

除了使用 ng-model="$parent.text" 还有其他方法吗？

Answer 1

由于 $parent 可能引用不同的范围，具体取决于上下文，建议您声明一个对象来保存您打算写入的属性(例如 $scope.data = {text: "foo "}; ) ，因此当 ng-model 试图写入值时(通过 ng-model="data.text")，它必须进行“读取"首先，沿着原型(prototype)链查看，直到它最终到达所需范围的“数据”属性(假设沿途没有其他范围具有该属性)。

此方法遵循 "always use the dot in ng-model"规则。

(旁注:另一种可能的方法是为 Controller 使用别名，假设它在您使用的 Angular 版本中可用)。

<div ng-controller="ExampleController">
    {{my.text}}
    <pane>
      <textarea ng-model="my.text"></textarea>
    </pane>
  </div>

http://plnkr.co/edit/aESrHtuSH9cd9ljyQAfH?p=preview