javascript - 单击选项卡后，Angular Bootstrap 选项卡更改 url

Question

我使用 Bootstrap's Tabs在我的项目中。单击选项卡后，我希望更改 url，如下所示:

/home/first
/home/second

但是我不知道怎么解决。这是我的 $routeProvider 代码:

  $routeProvider
      .when('/:appId/home', {
        templateUrl: 'app/home/home.html',
        controller: 'homeController'
      })
      .when('/:appId/home/first', {
        templateUrl: 'app/home/first/first.html',
        controller: 'firstController'
      })

UPD指令代码:

'use strict';

angular.module('bootstrap.tabset', [])
.directive('tabset', function () {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    controller: function($scope) {
      $scope.templateUrl = '';

      var tabs = $scope.tabs = [];
      var controller = this;

      this.selectTab = function (tab) {
        angular.forEach(tabs, function (tab) {
          tab.selected = false;
        });
        tab.selected = true;
      };

      this.setTabTemplate = function (templateUrl) {
        $scope.templateUrl = templateUrl;
      };

      this.addTab = function (tab) {
        if (tabs.length == 0) {
          controller.selectTab(tab);
        }
        tabs.push(tab);
      };
    },
    template:
      '<div class="row-fluid">' +
        '<div class="row-fluid">' +
          '<div class="nav nav-tabs" ng-transclude></div>' +
        '</div>' +
        '<div class="row-fluid">' +
          '<ng-include src="templateUrl">' +
        '</ng-include></div>' +
      '</div>'
  };
})
.directive('tab', function () {
  return {
    restrict: 'E',
    replace: true,
    require: '^tabset',
    scope: {
      title: '@',
      templateUrl: '@'
    },
    link: function(scope, element, attrs, tabsetController) {
      tabsetController.addTab(scope);

      scope.select = function () {
        tabsetController.selectTab(scope);
      }

      scope.$watch('selected', function () {
        if (scope.selected) {
          tabsetController.setTabTemplate(scope.templateUrl);
        }
      });
    },
    template:
      '<li ng-class="{active: selected}">' +
        '<a href="" ng-click="select()">{{ title }}</a>' +
      '</li>'
  };
});

主页 HTML:

<tabset>
    <tab title="Tab 1" template-url="/app/home/first/first.html"></tab>
    <tab title="Tab 1" template-url="/app/home/home.html"></tab>
</tabset>

app.js

angular.module('frontend', ['ngRoute', 'ui.bootstrap', 'localytics.directives'])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'app/main/main.html',
        controller: 'MainCtrl'
      })
     .when('/:appId/home', {
        templateUrl: 'app/home/home.html',
        controller: 'homeController'
      })
      .when('/:appId/home/first', {
        templateUrl: 'app/home/first/first.html',
        controller: 'firstController'
      })
      .otherwise({
        redirectTo: '/'
      });
  })

Answer 1

这是我发现的一个 plunker，有人在做你想做的事:http://embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/

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