Angular Bootstrap Tabs ändern URL nach Tab Klick

Question

Ich verwende Bootstrap's Tabs in meinem Projekt. Nachdem eine Registerkarte geklickt wird, würde ich die URL ändern möchten, wie folgt aus:

/home/first 
/home/second 

Aber ich weiß nicht, wie es zu beheben. Hier ist mein $routeProvider Code:

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

UPD Richtlinie Code:

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

Startseite 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

Hier ist ein Plunker ich von jemand tut genau das gefunden, was Sie tun möchten: 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

Nach Ihrer Frage, ich denke, angular default router wird Ihr Problem nicht lösen.

Statt Winkel Routen überprüfen Sie bitte, ui-Router ist es 3rd-Party-Router unterstützt mehrere Ansichten und subview

Ui-router

für Probe app es überprüfen:

ui-router sample app

Answer 3

Was Sie 'versuchen zu erreichen, kann leicht mit ui.bootstrap getan werden.

Es ist wirklich einfach zu bedienen und Sie müssen nicht Ihre eigene Richtlinie schreiben. Überprüfen Sie die 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' 
    }; 
}); 

Hoffnung, das hilft.