AngularJS 将数据从指令控制器传递到另一个答案

【问题标题】：AngularJS passing data from a directive controller to anotherAngularJS 将数据从指令控制器传递到另一个
【发布时间】：2013-02-04 22:25:58
【问题描述】：

我有一个表单，你可以用它来编辑图片库，当然我已经为它创建了一个指令，如下所示：

galleryEdit.html

<div>
  <form ng-submit="submit()">
    <label>Headline:</label>
    <input type="text" ng-model="gallery.headline" placeholder="Enter headline here" value=""/>

    <label>channels:</label>
    <channelselect></channelselect>

    <input type="submit"/>
  </form>
</div>

因此，galleryEdit 有另一个指令 channelSelect，您可以通过它选择频道（不仅适用于画廊）

channelselect.html

<div>
  <select>
      <option value="{{channel.shortCode}}">{{channel.name}}</option>
  </select>
</div>

GalleryEdit 有一个控制器，它为其指令传递数据（称为“gallery”），因此它的 $scope 具有 $scope.gallery 属性，其中包含通道 id：$scope.gallery.channel。由于 channelselect 有不同的控制器，它有它的范围，这个 gallery.channel 不能从那个范围看到。有没有办法将数据从画廊传递到通道控制器/指令？使用 $scope.$parent 不是一个解决方案，因为 channelSelect 不应该知道数据来自哪里。

【问题讨论】：

仅仅因为两个指令都有一个控制器并不意味着它们有不同的作用域。指令定义对象上的 scope 属性确定是否创建了新范围，以及新范围是否为隔离范围。因此，一种可能的解决方案是不创建任何新范围，然后两个指令将共享相同的范围，因此可以访问所有相同的 $scope 属性/数据。

标签： angularjs

【解决方案1】：

您可以在galleryEdit 指令的范围和channelselect 指令的范围之间设置双向绑定。

在您的 channelselect 指令的定义中，您可以执行以下操作：

directive('channelselect', [function () {
    ...
    scope: {channel: '='}
    ...
}])

这将为您的channelselect 指令创建一个隔离范围，并允许您使用<channelselect> 标记上的channel 属性来设置一个双向绑定 到其父作用域。

所以现在你可以在galleryEdit.html:

<channelselect channel="gallery.channel"></channelselect>

现在channelselect 的$scope.channel 将绑定到galleryEdit 的$scope.gallery.channel。

请参阅 AngularJS 的Directives 指南的指令定义对象部分，了解有关隔离作用域的更多详细信息。

【讨论】：