ng-transclude 中的 ng-model

【问题标题】：ng-model inside ng-transcludeng-transclude 中的 ng-model
【发布时间】：2014-07-11 15:56:09
【问题描述】：

在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"还有其他方法吗？

【问题讨论】：

如何将$watch 放在范围内的文本上并触发$emit 事件？

标签： javascript angularjs data-binding

【解决方案1】：

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

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

（旁注：另一种可能的方法是为控制器使用别名，假设它在您使用的角度版本中可用）。

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

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

【讨论】：