2012-09-03 16 views
7

Ich möchte Bootstrap-Registerkarten wie in this Beispiel, mit angularjs bootstrap erreichen - Es enthält Anweisungen Tabbable und TabPane. Es funktioniert nicht, ich habe keine Ahnung, wie man den Ball ins Rollen bringt.angularjs bootstrap tabs mit

<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}) 
+1

Hier ist die Version von jsFiddle auf 1.0.1 aktualisiert: http://jsfiddle.net/pkozlowski_opensource/HaN7d/1/ es funktioniert gut. Ich bin ein wenig verwirrt darüber, was Sie versuchen zu tun: machen Sie die Version von der Geige arbeiten? Oder der aus kantiger Arbeit? Wenn Sie die eckige gerade arbeiten wollen, was ist das Problem, vor dem Sie stehen? Könnten Sie eine jsFiddle senden, die das Problem aufdeckt? –

Antwort

1

Diese plunk zeigt ein Beispiel von dem, was Sie suchen. Original Link gefunden auf der angularjs JsFiddle-Examples wiki.

Angular Bootstrap Tabbable mit ng-View- und URL als aktuelle Tab tief Verknüpfung (Andy Joslin)

Auch auf Ihrem Anwendungsfall abhängig ist, sollten Sie bei den einen Blick nehmen erstellen Komponenten Abschnitt auf der angularjs Homepage http://angularjs.org. Der 'component.js' Quellcode in diesem Abschnitt zeigt Beispielcode, um schnell Registerkarten zu erhalten, die ohne angularjs bootstrap funktionieren. Sie können dieses Beispiel verwenden, um eine benutzerdefinierte Lösung zu erstellen, wenn Sie mehr Kontrolle über die Funktionalität benötigen.