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

Angular Bootstrap Tabs change url after tab click

本文关键字：选项 url Bootstrap Angular 单击      更新时间：2023-12-31

我在项目中使用Bootstrap的选项卡。点击标签后，我想更改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: '/'
      });
  })

下面是我发现的一个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>

使用ui.bootstrap.可以轻松实现您想要实现的目标

它真的很容易使用，而且你不需要写自己的指令。一定要看看这个例子。

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

希望这能有所帮助。

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

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

Ui路由器

对于示例应用程序，请查看：

ui路由器示例应用

相关文章：