Здесь моя первоначальная реализация вкладок ui.bootstrap с использованием ui.router:
<tabset>
<tab heading="Tab1" select="$state.go('home.tab1')">
<div ui-view="forTab1"></div>
</tab>
<tab heading="Tab2" select="$state.go('home.tab2')">
<div ui-view="forTab2"></div>
</tab>
</tabset>
Очень просто, и он работает в основном, но он имеет несколько проблем.
Во-первых, он не работает, если я ввожу URL-адрес в браузер, например. ".../дома/tab1". Проблема, которую я предполагаю, заключается в том, что, хотя ui.router может маршрутизировать в правильное представление, он не знает, чтобы выбрать эту вкладку вида.
Во-вторых, если я попытаюсь оставить страницу для состояния на другой странице, это вызовет явную ошибку в логике вкладок. Когда набор вкладок уничтожается, он уничтожает вкладки один за другим. Когда он уничтожает текущую выбранную вкладку, она, похоже, запускает ту же логику, что и при ее удалении, если только эта вкладка будет уничтожена, а не весь набор вкладок. Это заставляет его выбирать одну из других еще не уничтоженных вкладок, из-за чего ui.router переходит в это состояние табуляции, что мешает мне покинуть страницу. (Предположительно, исправление должно заключаться в том, что уничтожение набора вкладок не должно выбирать никаких вкладок во время процесса уничтожения.)
В-третьих, некоторые из видов вкладок могут быть сложными, при этом многие серверные удары во время их создания. Я не хочу уничтожать и воссоздавать их каждый раз, когда я переключаюсь с одной вкладки на другую. Я бы предпочел создать представление табуляции, когда эта вкладка будет сначала выбрана, а затем сохранится, пока я не покину страницу. Выбор ранее просматриваемой вкладки должен просто сделать ее видимой снова, а не повторно создать.
Итак, похоже, мне нужно что-то более сложное и сложное, но что? Заранее благодарим за любые предложения.
Обновление: в FAQ ui.router возникает вопрос о том, как реализовать вкладки. Это указывает на пакет дополнительных услуг, который выглядит многообещающим. Надеюсь, есть способ интегрироваться с вкладками ui.bootstrap. http://christopherthielen.github.io/ui-router-extras/#/sticky
Обновление: вот две реализации, которые работают намного лучше, но все еще не совсем правильные. Первый использует вкладки ui.bootstrap:
<tabset>
<tab heading="Products" ui-sref=".products" active="$state.includes('home.products')"></tab>
<tab heading="Users" ui-sref=".users" active="$state.includes('home.users')"></tab>
</tabset>
<div ui-view="home.products" ng-show="$state.includes('home.products')"></div>
<div ui-view="home.users" ng-show="$state.includes('home.users')"></div>
Вторая основана на top.html из примера липких вкладок Chris Thielen:
<div class="navbar navbar-default navbar-static-top" role="navigation">
<ul class="nav navbar-nav">
<li ng-class="{active: $state.includes('home.products')}" ><a ui-sref="home.products">Products</a></li>
<li ng-class="{active: $state.includes('home.users')}" ><a ui-sref="home.users">Users</a></li>
</ul>
</div>
<div class="tabcontent well-lg" ui-view="home.products" ng-show="$state.includes('home.products')" class="col-sm-6"></div>
<div class="tabcontent well-lg" ui-view="home.users" ng-show="$state.includes('home.users')" class="col-sm-6"></div>
Оба из них избегают моих первых двух проблем выше - переход на вкладку с помощью URL-адресов работает, и я могу покинуть страницу, не запуская ошибки с ошибками табуляции (по-видимому, потому, что я не использую "select =" ).
Однако, все еще есть проблема, и это происходит с обеими версиями. Шаблон home.users имеет ui-сетку, и если я сначала перейду на страницу с выбранной вкладкой, сетка будет пустой. Я вижу клиента, запрашивающего данные сетки с сервера, но он не показывает его. Если я перейду на другую вкладку и вернусь, то она отобразит данные (после повторной выборки). Хуже того, это означает, что я не могу заставить home.users быть липким, потому что тогда он застревает в режиме отображения без данных.
