1

画像ギャラリーを編集できるフォームがあります。もちろん、次のようなディレクティブを作成しました。

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 には、チャネル ID: $scope.gallery.channel を含む $scope.gallery プロパティがあります。channelselect にはスコープがある別のコントローラーがあるため、この gallery.channel はそのスコープからは見えません。gallery から channel controller/directive にデータを渡す方法はありますか? $scope.$parent を使用することは解決策ではありません。channelSelect はデータがどこから来ているのかを何も知らないはずだからです。

4

1 に答える 1

6

galleryEditディレクティブのスコープとディレクティブのスコープの間に双方向バインディングを設定できますchannelselect。

channelselectディレクティブの定義では、次のようなことを行うことができます。

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

これにより、ディレクティブの分離スコープが作成され、タグの属性を使用して、親スコープへの双方向バインディングを設定できるようになります。channelselectchannel<channelselect>

だから今あなたはこれを行うことができますgalleryEdit.html：

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

channelselectこれで、'sは'sに$scope.channelバインドされます。galleryEdit$scope.gallery.channel

分離されたスコープの詳細については、AngularJSのディレクティブガイドのディレクティブ定義オブジェクトのセクションを参照してください。

于 2013-02-04T14:19:35.247 に答える