Angular Boot Buffer Tabs Change URL After Clicking Bookmark

Question

I use Bootstrap tabs in my project. After clicking on the tab, I would like to change the URL as follows:

/home/first /home/second 

But I do not know how to fix it. Here is my $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 Directive 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>' }; }); 

HTML homepage:

 <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

Here is the plunker I found, someone is doing exactly what you want to do: 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

After looking at your question, I think that the default angular router will not solve your problem.

Instead of angular -routes, please check ui-router that the third-party router supports multiple views and subview

Ui-router

for an example application, check it out:

Ui-router sample application

Answer 3

What you are trying to achieve can be easily accomplished with ui.bootstrap .

It is very easy to use and you do not need to write your own directive. See an 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' }; }); 

Hope this helps.