AngularJS將數據從指令控制器傳遞到另一個

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指令創建一個隔離的作用域 ，並使您可以使用<channelselect>標記上的channel屬性來建立與其父作用域的雙向綁定 。

現在，您可以在galleryEdit.html執行此操作：

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

現在， channelselect的$scope.channel將被綁定到galleryEdit的$scope.gallery.channel 。

有關隔離范圍的更多詳細信息，請參見AngularJS 指令指南的“ 指令定義對象”部分。