0

Angular UI ブートストラップ タブを操作するディレクティブを作成しようとしています。
このディレクティブの主な目的は、選択されたタブを記憶することです。
私はそこにあるすべてのソリューションを見てきましたが、コントローラーに設定されていないタブのこの問題に対処するものはないようです:

<tabset>
  <tab heading="Customers" sctab>Customer tab content</tab>
  <tab heading="Sales" sctab>Sales Tab Content</tab>
</tabset>

注「sctab」は私のディレクティブ名です。ここで私は次の作業をしています：

  • タブがクリックされると、タブの見出し名として URL ハッシュが設定されます
  • リンクをクリックして戻ると、そのハッシュが記憶されます。
  • ページの読み込み時に、ハッシュに一致するタブ (または要素) を特定します

ただし、最後のステップで障害物に遭遇しました。

  • URL ハッシュに一致するタブをアクティブ化する

このために、以下のコードで確認できるいくつかのことを試しました。完全に機能したものはありません。

アクティブ状態は、「アクティブ」と呼ばれるUIブートストラップタブディレクティブのisolate-scope変数に設定されていると思います。

ngClass もこの変数にバインドされています。

ng-class="{active: active, disabled: disable}"

したがって、基本的にここでは、タブをアクティブにしようとして、タブに active = true を設定しようとしました（無駄に）。
詳細に入る前に、ここで立ち止まって、私が試したことに基づいたアイデアを誰かが持っているかどうかを確認します。
これが私の指示です：

angular.module('jonsmodule')
.directive('sctab', ['$rootScope', '$state', '$location', function($rootScope, $state, $location) {
    return {
        restrict: "A",
        link: function (scope, element, attrs) {

            /**
             * INITIALIZING THE ACTIVE TAB FROM HASH
             */
            scope.$watch(
                // watch for setting of the element heading (so we know when the bootstrap tabs are loaded)
                function () { return element.children().first('p')[0].innerText; },
                function (newValue, oldValue) {
                    // when ui-bootstrap tabs loaded
                    if (newValue !== oldValue) {

                        // if hash matches the tab heading name
                        if ($location.hash() == newValue.trim()) {

                            /**
                             * ******** NEED HELP HERE ************
                             * THE GOAL HERE IS TO SET THE TAB ACTIVE
                             * it does not work completely
                             * below is a list of things I tried
                             */

                            //$(element).tab('show'); // .tab is not a function

                            $(element).addClass('active'); // changes the class but the tab will not change

                            scope.$$childHead.active = true; // appears to not save

                            // attrs.$set('ngClass', {active: true, disabled: false}); // this does not appear to change anything

                        } else {
                            scope.$$childHead.active = false; // appears to save and the first tab is not selected
                        }

                    }

                }
            );

            /**
             * CHANGING THE TAB
             */
            // get the state (controller)
            var current_state = $state.current.name;

            // on tab change set the hash
            element.on('click', function () {
                var tabLabel = element.children().first('p')[0].innerText;
                history.pushState(null, null, current_state + '#' + tabLabel);
            });
        },
    };
}]);
4

1 に答える 1

0

タブ自体でタブのアクティブ状態を設定し、スコープ値を指定してみてください。例えば：

  <tab select="tabSelected('tab1')" active="tabs.tab1">
  <tab select="tabSelected('tab2')" active="tabs.tab2">


   $scope.tabs = {tab1: false, tab2:false};
   $scope.tabSelected = function (whichTab) {

        $scope.currentTab = whichTab;
   };

   function setTabDisplayed() {
        $scope.tabs[$scope.currentTab] = true;
    }
于 2015-07-06T18:24:18.993 に答える