Pestañas de bootstrap angularjs usando

Question

Quiero lograr pestañas de arranque como en this ejemplo, usando angularjs bootstrap - Contiene directivas tabbable y tabPane. No funciona, no tengo idea de cómo hacer rodar la pelota.

<tabbable> 
    <tabPane title="first"> 
     <div ng-controller="FirstCtrl"></div> 
    </tabPane> 
    <tabPane title="tabbable"> 
     <div ng-controller="SecondCtrl"></div> 
    </tabPane> 
</tabbable> 

app.js:

angular.module('orders_manage', ['orders_manage.services', 'bootstrap']) 
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 

$routeProvider 
    .when('/first', { templateUrl:'/partials/first.html', controller:FirstCtrl}) 
    .when('/second', { templateUrl:'/partials/second.html', controller:SecondCtrl}) 

Answer 1

Si se echa un vistazo a la fuente que encontrará que estas directivas se limitan a: nombres de las clases https://github.com/angular/angular.js/blob/v1.0.x/src/bootstrap/bootstrap.js#L54

Reescribiendo el ejemplo de usar <div class="tabbable"> y <div class="tab-pane"> arreglarán el problema.

Answer 2

Este plunk muestra un ejemplo de lo que está buscando. El enlace original se encuentra en el angularjs JsFiddle-Examples wiki.

angular Bootstrap Tabbable con ng-view y URL como pestaña corriente profunda vinculación (Andy Joslin)

También, dependiendo de su caso de uso, es posible que desee echar un vistazo a la Crear La sección Componentes en la página de inicio de angularjs http://angularjs.org. El código fuente 'component.js' en esa sección muestra código de ejemplo para obtener rápidamente pestañas que funcionan sin angularjs bootstrap. Puede usar este ejemplo para crear una solución personalizada si necesita más control sobre la funcionalidad.