Вкладки Angular ui-bootstrap не отображают пользовательский интерфейс

Я обновляю существующее приложение angular до всех последних версий angular (v1.2.13), ui-router (v0.2.8) и ui-bootstrap (v0.10.0).

У меня есть вложенные представления, которые имеют несколько именованных представлений. Внутри одного из именованных представлений есть вкладки. Раньше я мог установить ui-views на каждой вкладке, но это больше не работает. Если я не использую вкладки, то именованные представления отображаются правильно.

Я создал plunkr, чтобы показать, что я вижу.

Вот моя конфигурация состояния. _split.html имеет 3 именованных представления: TOP, MIDDLE и BOTTOM. TOP и MIDDLE имеют представления с именами LEFT и RIGHT. TOP имеет вкладки и не отображает представления LEFT или RIGHT. MIDDLE имеет представления с одинаковыми именами, и они отображаются правильно.

  $stateProvider
      .state("foo", {
        abstract: true,
          url: "/foo",
          templateUrl: '_split.html',
      })
      .state("foo.view", {
        abstract: true,
        url: '',
        views: {
          'TOP': {
            template: '_tabs.html'
          },
          'MIDDLE': {
             templateUrl: '_tabs2.html'
          },
          'BOTTOM': {
            template: '<h2>Bottom</h2>'
          }
        },
      })
      .state("foo.view.tabs", {
        url: '',
        views: {
          'LEFT': {
            template: '<h3>Left</h3>'
          },
          'RIGHT': {
            template: '<h3>Right</h3>'
          }
        }
      })

Есть ли способ отобразить пользовательский интерфейс на вкладках?


angularjs angular-ui-router angular-ui-bootstrap
person Mark Meyer    schedule 19.02.2014    source источник
comment
Он хорошо работает с v0.2.7 (ui-маршрутизатор). У меня эта проблема только с v0.2.8. Может быть, это ошибка?   -  person ekstro    schedule 05.03.2014
comment
Подтверждено: Что-то изменилось между v0.2.7 и v0.2.8, чтобы сломать это. В моем случае откат до версии 0.2.7 решил проблему.   -  person Brent    schedule 06.03.2014

Ответы (2)


arrow_upward
9
arrow_downward

Да, вы можете отображать UI-представления на вкладках. Хитрость заключается в том, чтобы использовать ui-sref в <tab-heading> для управления изменением состояния/маршрута и располагать ui-view ниже </tabset>. Я уверен, что есть и другие способы, но именно так я получил вкладки, работающие с ui-router.

изменить обновление

Выше исходное предложение неверно, ui-sref должно быть в <tab>

Совет по chris-t для правильной конфигурации.

Демонстрация работы с несколькими представлениями http://plnkr.co/edit/gXnFS3?p=preview

index.html

<tabset>
  <tab ui-sref="left">
    <tab-heading style="cursor:pointer;">
      <a ui-sref-active="active">Left</a>
    </tab-heading>
  </tab>
  <tab ui-sref="right">
    <tab-heading style="cursor:pointer;">
      <a ui-sref-active="active">Right</a>
    </tab-heading>
  </tab>
</tabset>
<div class="row">
  <br>
  <div class="col-xs-4">
    <div class="well" ui-view="viewA">
      <!--Here is the A content-->
    </div>
  </div>
  <div class="col-xs-4">
    <div class="well" ui-view="viewB">
      <!--Here is the B content-->
    </div>
  </div>
</div>

app.js (конфигурация пользовательского интерфейса маршрутизатора)

$stateProvider
.state('left', {
  url: "/",
  views: {
    "viewA": {
      template: "Left Tab, index.viewA"
    },
    "viewB": {
      template: 'Left Tab, index.viewB<br><a ui-sref=".list">Show List</a>' +
                '<div ui-view="viewB.list"></div>'
    },
    "viewC": {
      template: 'Left Tab, index.viewC <div ui-view="viewC.list"></div>'
    }
  }
})
.state('left.list', {
  url: 'list',
  views: {
    "viewB.list": {
      template: '<h2>Nest list viewB</h2><ul>' +
                '<li ng-repeat="thing in tab1things">{{thing}}</li></ul>',
      controller: 'Tab1ViewBCtrl',
      data: {}
    },
    "viewC.list": {
      template: 'Left Tab, list.viewC'
    }
  }
})
person cheekybastard    schedule 20.02.2014
comment
Я смог получить рабочую версию, используя этот метод, так что спасибо. Раньше у меня были уже загружены обе вкладки, так что переключение между ними было практически мгновенным. Есть ли способ сделать это? - person Mark Meyer; 20.02.2014
comment
Да, посмотрите, как работает система сборки github.com/ngbp/ngbp, шаблоны .html вводится в DOM при загрузке приложения, компилируется grunt. Из README.md: delta:tpls — когда какой-либо файл *.tpl.html в src/ изменяется, все шаблоны помещаются в строки в файле JavaScript (технически два, один для src/common/ и другой для src/app/ ), который добавит шаблон в $templateCache AngularJS, чтобы файлы шаблонов были частью начальной полезной нагрузки JavaScript и не требовали никакого XHR в будущем. Файлы кеша шаблонов — build/template-app.js и build/template-common.js. - person cheekybastard; 21.02.2014
comment
@cheekybastard Вам нужно щелкнуть ссылку внутри заголовка вкладки? В моем случае щелчок по заголовку квадратной вкладки изменяет текущую вкладку, но не щелкает ссылку и, следовательно, не меняет состояние. - person Stephane; 18.09.2014
comment
Да, это ссылка, управляющая изменением состояния. Ссылка содержит директиву ui-router ui-sref с состоянием ui-router для вызова. Вы можете использовать ng-click для вызова изменения состояния, щелкнув в любом месте заголовка вкладки. - person cheekybastard; 20.09.2014
comment
@cheekybastard: Вам подходит это ng-click предложение? Я сделал <tab-heading ng-click="switchTab($index)">' и использовал $state.go() в switchTab(), но мне все еще нужно щелкнуть фактический текст, чтобы получить переход на другую вкладку. - person orange; 12.11.2014
comment
Хорошо, я понял: вам нужно добавить метод select="followLink()" в тег <tab>, который вызывается, когда пользователь выбирает вкладку. ng-click не работает. - person orange; 12.11.2014
comment
Я не понимаю, почему это решение? Решение @Maui Doug более полное. И даже это решение является неправильным или имеет недостаток. Почему в левом состоянии нет URL-адреса, кроме =› run.plnkr.co/Y8IFKQ55y0LgDpuC/#! на самом деле должно быть =› run.plnkr.co/Y8IFKQ55y0LgDpuC/#!/left< /а> - person Pascal; 10.02.2015
comment
Поскольку копипаста опоздала на несколько месяцев, сравните даты. В любом случае, спасибо, что сообщили мне о проблеме, я обновил ответ/демонстрацию. - person cheekybastard; 10.02.2015

arrow_upward
3
arrow_downward

Установка заголовка вкладки активирует ссылки, но если вы щелкнете на вкладке, но вне ссылки, ссылка не активируется. Вот ответ, который я получил от ui-router. Спасибо Крису Т.

пользовательский интерфейс

plunkr

    <tabset>
    <tab ui-sref="user.list">
        <tab-heading><a ui-sref-active="active">Users</a></tab-heading>
    </tab> 
    </tabset>

Обновлять:

У меня были проблемы с этим, из-за ui-sref-active. Начиная с ui-router.2.10.2.11/angular-ui-router.js это было улучшено для поддержки наследования - см. переполнение стека и UI-маршрутизатор, проблема 18

person Maui Doug    schedule 14.04.2014
comment
Это следует превратить в вопрос с самостоятельным ответом на StackOverflow. Это важный пример для начинающих/пользователей среднего уровня ui-router о том, как настроить state.js так, чтобы вкладки были визуально отделены от содержимого вкладок. ИМХО один из лучших плунжеров про ui-router в связке с ui-bootstrap. - person Christian Bonato; 02.09.2014
comment
Просто увидел это сейчас, сразу после того, как я прокомментировал выше. Правило, которое я забыл: всегда читайте всю страницу на SO, прежде чем комментировать. - person Stephane; 18.09.2014