Angular Bootstrap 选项卡在选项卡单击后更改 url答案

【问题标题】：Angular Bootstrap Tabs change url after tab clickAngular Bootstrap 选项卡在选项卡单击后更改 url
【发布时间】：2023-03-27 20:18:01
【问题描述】：

我在我的项目中使用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: '/'
      });
  })

【问题讨论】：

如果您可以发布更多代码，最好是工作演示，这将更容易帮助您解决问题。
@atefth 我更新了我的问题
您能否也发布您的 app.js 和控制器代码？
@atefth 我再次更新了我的问题
@atefth 我找到了好的组件github.com/rpocklin/ui-router-tabs

标签： javascript jquery angularjs twitter-bootstrap tabs

【解决方案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>

【讨论】：

【解决方案2】：

使用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'
  };
});

希望这会有所帮助。

【讨论】：

我不确定 with url 会改变。
我认为 OP 希望使用选项卡来加载他的模板并更改 url，这可以通过 ui.bootstrap 来实现，但 ui.router 只会更改状态，从而在ui-view 指令..
这和你对控制器所做的一样，任何方式都有自己的观点

【解决方案3】：

看到你的问题后，我认为 Angular 默认路由器不会解决你的问题。

请检查 ui-router 而不是 angular-routes，它是第 3 方路由器支持多个视图和子视图

Ui-router

对于示例应用，请查看：

ui-router sample app

【讨论】：