Question

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

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不应该知道数据来自何处。

Answer 1

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

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

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

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

现在你可以在galleryEdit.html：

中执行此操作

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

现在channelselect的{{1}}将绑定到$scope.channel的{{1}}。

有关隔离范围的更多详细信息，请参阅AngularJS的Directives指南的指令定义对象部分。

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

1 个答案: