टैबर

Question

पर क्लिक करने के बाद कोणीय बूटस्ट्रैप टैब यूआरएल बदलते हैं I प्रोजेक्ट में Bootstrap's Tabs का उपयोग करते हैं। बाद एक टैब क्लिक किया जाता है, मैं यूआरएल की तरह इस तरह, बदलने के लिए होगा:

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

युपीडी निर्देशक कोड:

'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 रूटर यह 3 पार्टी रूटर पर यह जाँच के कई दृश्य हैं और नमूना अनुप्रयोग के लिए subview

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

आशा इस मदद करता है।