AngularJS UI Bootstrap ўкладкі, якія падтрымліваюць маршрутызацыю

Я хацеў бы выкарыстаць AngularJS UI Bootstrap Укладкі ў маім праекце, але мне гэта трэба для падтрымкі маршрутызацыі.

Напрыклад:

Tab         URL
--------------------
Jobs       /jobs
Invoices   /invoices
Payments   /payments

Наколькі я магу судзіць з зыходнага кода, бягучы ўкладкі і панэль дырэктывы не падтрымлівае маршрутызацыю.

Што было б лепшым спосабам дадаць маршрутызацыю?

38

10 адказы

Для дадання маршрутызацыі звычайна выкарыстоўваецца дырэктыва НГ выгляду. Я не ўпэўнены, што гэта досыць лёгка змяніць кутнюю UI падтрымаць тое, што вы шукаеце, але тут plunker паказвае прыкладна тое, што я думаю, што вы шукаеце (гэта не абавязкова самы лепшы спосаб зрабіць гэта - спадзяюся, хто-то можа даць вам лепшае рашэнне, ці палепшыць на гэтым)

38
дададзена
Звярніце ўвагу ў шлёпнуць, як калі вы перамяшчацца паміж укладкамі, а затым перамяшчацца назад (націснуць заднюю кнопку на клавіятуры), правільны выгляд візуалізуецца, але ўласна актыўная ўкладка ня? Глядзіце гэта для вырашэння: stackoverflow.com/a/25735997/410937
дададзена аўтар atconway, крыніца
Гэта лепшы адказ. Нават не турбаваць з кутнім Ui-самазагрузкі закладак дырэктыў; проста рэалізаваць з ngRoute. Я б на самой справе проста наладзіць Plunk дэманстрацыі, і збіраўся апублікаваць свой адказ, перш чым я зразумеў, што ён быў такім жа, як ваша.
дададзена аўтар user240515, крыніца
Мне падабаецца гэтая waaay лепш, чым падыход Кутні UI Bootstrap. Што я не разумею, так ці інакш дарэчы. Я не бачу ніякіх рэальных падстаў для аднаўлення Bootstrap.js ў карыстацкі вуглавыя дырэктывы. Тыя павінны быць падзеленыя, каб выкарыстоўваць лепшыя часткі абодвух кутніх і загрузніку. Адмова ад адказнасці: гэта чыста маё 2ct.
дададзена аўтар Gerben Rampaart, крыніца

Выкарыстанне дадзеных-мішэнь = "# Tab1". Працаваў для мяне

15
дададзена
Дзякуй, што вырашыла кутні маршрут быць выклікана пры націску на ўкладку
дададзена аўтар David, крыніца
Гэта выдатны адказ, калі ў вас ёсць іншыя элементы на старонцы вы не хочаце, каб маршрутызацыя Nav ад. +1 :)
дададзена аўтар Simon Willan, крыніца
5
дададзена

Гэты адказ вельмі дапамог мне HTTP://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx (вельмі простае, але магутнае рашэнне)

5
дададзена

Agree with the use of UI-Router which tracks states and works great with nested views. Speaking particularly of your Bootstrap tabs issue there is a great implementation that leverages UI Router: UI-Router Tabs

2
дададзена

Гэта Aught, каб мець магчымасць рабіць тое, што вы хочаце:

https://github.com/angular-ui/ui-router

1
дададзена
Гэта не дастаткова кірунак, каб адказаць на гэтае пытанне.
дададзена аўтар Daniel Kaplan, крыніца

Калі ў вас ёсць маршрут пад назвай налада, і вы хочаце, каб укладкі ў гэтай наладзе старонцы нешта накшталт гэтага працуе.

<div class="right-side" align="center">
    <div class="settings-body">
        
        <div class="tab-content">
          <div id="private_email" class="tab-pane fade in active">
            <div class="row" ng-controller="SettingsController">
                <div>
                   <button class="btn btn-primary" ng-click="activatePrivateEmail()">Activate email</button>
                   <button class="btn btn-danger">Deactivate email</button>
                </div>
            </div>
          </div>
          <div id="signature" class="tab-pane fade">
              


              <div class="send-btn">
                <button name="send" ng-click="" class="btn btn-primary">Save signature</button>
              </div>
          </div>
          <div id="menu2" class="tab-pane fade">
            

Menu 2

            
Some content in menu 2. </div> </div> </div> </div>
1
дададзена
Гэта было маім лепшым рашэннем, хоць я проста выдаліць #! у HREF = "#!/Налады # private_email". Перавага заключаецца ў тым, што вам не трэба дадаваць код JS, толькі чысты # навігацыі.
дададзена аўтар Ted Corleone, крыніца

you could pass your own custom key value pairs in the route definition and achieve this. here's a good example: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

1
дададзена
Спасылка толькі адказы не дапускаюцца. Прачытайце StackOverflow дапамогу.
дададзена аўтар jgauffin, крыніца
Абагульніць рашэнне, каб ваш адказ працуе без спасылкі, і я выдалю downvote.
дададзена аўтар user240515, крыніца

Я атрымаў ўкладкі з маршрутызацыяй працуе наступным чынам.

Гэта ў стане зрабіць усё, што вы хочаце ад дынамічных ўкладак, і гэта на самай справе вельмі проста.

  • Укладкі з Ui кшталту , так што ён можа дынамічна загружаць шаблоны,
  • Маршрутызацыя Абнаўленне ў URL
  • Усталяваць гістарычнае стан
  • Пры непасрэднай навігацыі па маршруце з укладкамі, закладка правільна адзначаюцца як актыўны .

Вызначэнне ўкладак з параметрам у маршрутызатары

.state('app.tabs', {
    url         : '/tabs',
    template    : template/tabs.html,
})
.state('app.tabs.tab1', {
    url         : '/tab1',
    templateUrl : 'template/tab1.html',
    params      : {
        tab         : 'tab1'
    }
})
.state('app.visitors.browser.analytics', {
    url         : '/tab1',
    templateUrl : 'template/tab2.html',
    params      : {
        tab         : 'tab2'
    }
})

Шаблон укладкі (tabs.html) з'яўляецца

<div ng-controller="TabCtrl as $tabs">
    
        
        
    
    <div ui-view></div>
</div>

Што ў пары з вельмі простым кантролерам для атрымання бягучай актыўнай ўкладкі:

app.controller('TabCtrl', function($stateParams) {
    this.activeTab = $stateParams.tab;
})
0
дададзена

толькі невялікі дадаць да прынятага адказу:  мне трэба, каб захаваць бягучую ўкладку перазагрузкі старонкі, так што я выкарыстаў перамыкач, як гэта:

$scope.tabs = [
            { link : '#/furnizori', label : 'Furnizori' },
            { link : '#/total', label : 'Total' },
            { link : '#/clienti', label : 'Clienti' },
            { link : '#/centralizator', label : 'Centralizator' },
            { link : '#/optiuni', label : 'Optiuni' }
        ];

        switch ($location.path()) {
            case '/furnizori':
                $scope.selectedTab = $scope.tabs[0];
                break;

            case '/total':
                $scope.selectedTab = $scope.tabs[1];
                break;

            case '/clienti':
                $scope.selectedTab = $scope.tabs[2];
                break;

            case '/centralizator':
                $scope.selectedTab = $scope.tabs[3];
                break;

            case '/optiuni':
                $scope.selectedTab = $scope.tabs[4];
                break;

            default:
                $scope.selectedTab = $scope.tabs[0];
                break;
        }
0
дададзена