3

ブートストラップ タブセット ディレクティブと共に AngularJS SPA で angular-ui-router を使用しています。

ここに私の例http://plnkr.co/V0Cs6BfnggXshawMv4LXと問題を再現する手順があります。

  • ページを簡単にリロードできるように、プランカーを「フルスクリーン」で起動します。
  • 「子 2」タブをクリックします。
  • ブラウザーの URL は、状態を /home/child2 として正しく表示します
  • ページをリロードします。
  • ブラウザの URL はまだ /home/child2 として状態を示しています

問題は、状態が「home.child2」であっても、タブセットの UI で「子 1」タブが選択されていることです。タブを正しい状態に自動的に表示する方法はありますか?

4

4 に答える 4

2

私はタブ配列と $stateChangeSuccess なしでこれを行いました... まだ 1 つの回避策があります。

これにより、クリックとアクティブなステータスが制御されます。

<tab ui-sref="home.child1" ui-sref-active="active"></tab>

私にとっては、ページが更新されたとき、または最初に URL からロードされたときに、タブ要素内で ui-view が機能しません。タブがクリックされたときにのみ機能しました。したがって、回避策は、タブセットの下に ui-views をリストすることです。

<tabset><tab ui-sref="home.child1" ui-sref-active="active"></tab></tabset>
<div ui-view="home.child1"></div>

これで、更新時に正しい ui ビューのみが表示され、ナビゲーションが機能するようになりました。

これが私のアプリに固有のものかどうかはわかりません。ただし、最初のタブは常にアクティブでした。最初のタブとして無効化されたタブが回避策でした:<tab disabled="true"/>

于 2014-10-10T15:57:10.147 に答える
1

私は数日前に同じ問題を抱えていました。いくつかの調査の後、私はあなたを助けるかもしれない解決策を見つけました：

ステート構成

angular.module('app', [
'ui.router'
])

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('home'); // For any unmatched url, redirect to home.

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: "", // First template.
            controller: "homeController"
    })

        .state('home.child1', {
            url: '/child1',
            templateUrl: "", // Second template.
            controller: "homeController"
    })
        .state('home.child2', {
            url: '/chil2',
            templateUrl: "", // Third template.
            controller: "homeController"
    })
        .state('home.childn', {
            url: '/chiln',
            templateUrl: "", // n template.
            controller: "homeController"
    });
}])

コントローラー

.controller('homeController', ['$scope', '$state', function($scope, $state) {

$scope.active = function(route) {
    return $state.is(route);
};

$scope.tabs = [
    { heading: "Home", route:"home", active:false }, // Tab 1
    { heading: "Child One", route:"home.child1", active:false }, // Tab 2
    { heading: "Child Two", route:"home.child2", active:false }, // Tab 3
    { heading: "Child n", route:"home.childn", active:false } // Tab n
];

$scope.$on("$stateChangeSuccess", function() { // Keep the right tab highlighted if the URL changes.
    $scope.tabs.forEach(function(tab) {
        tab.active = $scope.active(tab.route);
    });
});
}]);

最後になりましたが、HTML

<tabset>
<tab 
ng-repeat="tab in tabs" 
heading="{{ tab.heading }}"
ui-sref="{{ tab.route }}"
active="tab.active">
</tab> 
</tabset>

これがデモです。

于 2014-04-27T15:51:00.240 に答える
0

私が見つけた 1 つの方法は、各タブにフィルターを追加して、そのタブの状態が現在の状態である場合にアクティブ状態を true に設定することです。

<tab heading="Heading For First Tab" active="('home.tab1' | isState)" />

それは機能しますが、副作用として、フレームワークが「アクティブ」にする $watch で例外が生成されます。

于 2014-04-08T18:54:39.833 に答える
0 

            <li heading="Status" class="ng-isolate-scope var" ng-model="(var = 'active: active')" >
                <a href="/1">Status1</a>
            </li>


            <li heading="Status" class="ng-isolate-scope var" ng-model="var = 'active: active'">
                <a href="/2">Status</a>
            </li>


    </tabset>
于 2015-04-29T18:26:53.477 に答える