Angular UI Bootstrap选项卡在路由更改时打开

Question

I am using the tab directive from Bootstrap UI for my current AngularJS project and am heavily struggling with the implementation of route-based tabs . 我正在使用Bootstrap UI中的tab指令作为我当前的AngularJS项目，并且正在努力实现基于路由的选项卡 。

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

While the select attribute works okay for changing the route when clicking a tab heading I cannot get the active attribute to work as above (fails inside of angular-ui afterparsing the expression). 虽然select属性可以在单击选项卡标题时更改路径，但我无法使active属性如上所述（在解析表达式后，angular-ui内部失败）。

So my question is: why does the active attribute not work and is there a better way to bind the tabs to my route bidirectional? 所以我的问题是：为什么active属性不起作用，是否有更好的方法将选项卡绑定到我的双向路由？

UPDATE: The following is my controller: 更新：以下是我的控制器：

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;
    }
};

The isActive method is called properly but then the following exception occurs: 正确调用isActive方法，但随后发生以下异常：

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

Apparently, the setActive method inside of the directive function is not created for some reason. 显然，由于某种原因，不会创建指令函数内部的setActive方法。 Any idea why? 知道为什么吗？

Answer 1

Here is a simple working example as close as to your code without seeing it all, save this in as index.html and test, tried putting in plunkr(not testable in plunkr but works, but the source is there as well: http://embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/index.html ): 这是一个简单的工作示例，尽可能接近您的代码，但没有看到它，将其保存为index.html和test，尝试放入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>

Angular UI Bootstrap选项卡在路由更改时打开

问题描述

1 个解决方案

解决方案1
0 2013-11-02 16:50:29

Angular UI Bootstrap选项卡在路由更改时打开

问题描述

1 个解决方案

解决方案1 0 2013-11-02 16:50:29

解决方案1
0 2013-11-02 16:50:29