4

我正在为我当前的AngularJS项目使用来自Bootstrap UI的 tab 指令，并且在实现基于路由的 tabs时遇到了很大的困难。

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

虽然该select属性可以在单击选项卡标题时更改路线，但我无法使该active属性按上述方式工作（在解析表达式后在 angular-ui 内部失败）。

所以我的问题是：为什么 active 属性不起作用，是否有更好的方法将选项卡绑定到我的双向路由？

更新： 以下是我的控制器：

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 回答