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

在这里，我发现有人做了你想要做的事：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>

Answer 2

在看到你的问题后，我认为角度默认路由器无法解决你的问题。

相反角度路由请检查ui-router它是第三方路由器支持多个视图和子视图

Ui-router

为示例应用程序检查：

ui-router sample app

Answer 3

您可以使用ui.bootstrap轻松完成您尝试实现的目标。

它非常易于使用，您不需要编写自己的指令。请查看example。

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {
  $scope.tabs = [
    { title:'Dynamic Title 1', content:'Dynamic content 1' },
    { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
  ];

  $scope.alertMe = function() {
    setTimeout(function() {
      $window.alert('You\'ve selected the alert tab!');
    });
  };

  $scope.model = {
    name: 'Tabs'
  };
});

希望这有帮助。

选项卡单击后，Angular Bootstrap选项卡会更改URL

3 个答案: