4

現在のAngularJSプロジェクトでBootstrap UIのタブ ディレクティブを使用しており、ルートベースのタブの実装に非常に苦労しています。

<tabset>
    <tab heading="Dashboard"
             select="$parent.onTabSelected('dashboard')"
             active="$parent.isActive(this)">
        <!-- Content... -->
    </tab>
</tabset>

selectタブの見出しをクリックしたときにルートを変更しても属性は正常に機能しますが、属性を上記のように機能させることはできません(active式の解析後に angular-ui 内で失敗します)。

だから私の質問は: なぜアクティブな属性が機能しないのですか?タブを双方向のルートにバインドするより良い方法はありますか?

更新: 以下は私のコントローラーです:

MainCtrl = function($scope) {
    $scope.rooms = [{
        id : 0,
        title : 'Room 1'
    }, {
        id : 1,
        title : 'Room 2'
    }];

    $scope.isActive = function(route) {
        if(('#/' + route) === location.hash) {
            return true;
        }
        return false;
    }

    $scope.onTabSelected = function(tab) {
        var route;
        if ( typeof tab === 'string') {
            switch(tab) {
                case 'dashboard':
                    route = 'dashboard';
                    break;
            }
        } else {
            route = 'rooms/' + tab.room.id;
        }
        window.location.hash = '#/' + route;
    }
};

メソッドは適切にisActive呼び出されますが、次の例外が発生します。

TypeError: undefined is not a function
at postLink (http://fakepath/bootstrap-ui/templates.js:2374:11)

どうやら、setActiveディレクティブ関数内のメソッドが何らかの理由で作成されていないようです。理由はありますか？

4

1 に答える 1

0

これは、すべてを表示せずにコードに近い単純な作業例です。これを index.html として保存してテストし、plunkr に入れてみました (plunkr ではテストできませんが、動作しますが、ソースもそこにあります: http:/ /embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/index.html ):

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet">
</head>

<body ng-controller="MainCtrl">

  <div ng-controller="TabCtrl">
    <tabset>
      <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" select="onTabSelected(tab.slug)">
        {{ tab.content }}
      </tab>
    </tabset>
  </div>
  <script type="text/javascript" charset="utf-8">
    angular.module('app', ['ui.bootstrap']).config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.when('/', {
            controller: 'MainCtrl'
        }).when('/room/:id', {
            controller: 'RoomCtrl',
        }).when('/dashboard', {
            controller: 'DashboardCtrl'            
        }).otherwise({
            redirectTo: '/'
        });
        $locationProvider.html5Mode(false);
    }]);    

    var TabCtrl = function($scope) {
      $scope.tabs = [{
        slug: 'dashboard',
        title: "Dashboard",
        content: "Your Dashboard"
      }, {
        slug: 'room-1',
        title: "Room 1",
        content: "Dynamic content 1"
      }, {
        slug: 'room-2',
        title: "Room 2",
        content: "Dynamic content 2"
      }];
    };

    RoomCtrl = function($scope, $location) {

    };

    DashboardCtrl = function($scope, $location) {

    };    

    MainCtrl = function($scope, $location) {

      $scope.onTabSelected = function(tab) {
        var route;
        if (typeof tab === 'string') {
          switch (tab) {
            case 'dashboard':
              route = tab;
              break;
            default:
              route = 'rooms/' + tab;
              break;
          }
        }
        $location.path('/' + route);
      };

    };
  </script>
</body>

</html>
于 2013-11-02T16:50:29.410 に答える