Угловые бутстрапы Вкладки изменяют 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> 

Answer 2

После просмотра вашего вопроса, я думаю, что угловой маршрутизатор по умолчанию не решит вашу проблему.

Вместо угловых маршрутов, пожалуйста, проверьте UI-маршрутизатор это третья сторона маршрутизатор поддерживает несколько представлений и подвид

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

Надеется, что это помогает.