0

ここでTabs (ui.bootstrap.tabs)説明されている control\directiveを使用しています。コントロールは、アクティブなタブを設定する独自のコントローラーを作成します。

.controller('TabsetController', ['$scope', function TabsetCtrl($scope) {
  var ctrl = this,
      tabs = ctrl.tabs = $scope.tabs = [];

  ctrl.select = function(selectedTab) {
    angular.forEach(tabs, function(tab) {
      if (tab.active && tab !== selectedTab) {
        tab.active = false;
        tab.onDeselect();
      }
    });
    selectedTab.active = true;
    selectedTab.onSelect();
  };

タブセットの子タブ コントロール (子要素) をクリックすると、親の選択機能をトリガーできます。

.directive('tab', ['$parse', function($parse) {
  return {
    require: '^tabset',
    scope: {
      onSelect: '&select',

最初のタブをアクティブに設定するためにselect関数をトリガーする必要があるDOMの上にカスタムコントローラーがあります。TabsetControllerイベントブロードキャストを使用できることを読みましたが、TabsetControllerイベントリスナーをバインドするように変更できないため、これは実行可能なオプションではないようです。助言がありますか？

編集：

理解を深めるために、Plunker を参照してください。

4

1 に答える 1

0

「親」コントローラー内でスコープ属性を宣言すると、子コントローラーでアクセスできるようになります。参照: AngularJS - 子スコープへのアクセス

MainController が親要素に設定されているのに対し、TabsetController は子 DOM 要素に設定されているため、MainController で $scope.tabs を定義および操作でき、TabsetController で表示および解釈されます。

于 2014-07-14T09:15:27.863 に答える