2013-07-17 12 views
8

Nie wydaje mi się, żebym mógł ustawić główną zakładkę w kanciastym pasku startowym. Zawsze aktywuje najbardziej aktywną kartę po lewej stronie.Ustawianie początkowej statycznej zakładki w początkowym ustawieniu kątowym

Biorąc html:

<tabset> 
    <tab heading="Static 1" active="data.static1">Static content</tab> 
    <tab heading="Static 2" active="data.static2">Static content</tab> 
</tabset> 

i JS:

angular.module('plunker', ['ui.bootstrap']); 
var TabsDemoCtrl = function ($scope) { 
    $scope.data = {static1: false, static2: true} 
}; 

zobaczyć Aktualizacja Plunker

6 lip 2013: Teraz stały prąd widzieć github issue.

+0

Dodałem nową odpowiedź, ponieważ nadal jest problem w wersji 0.6.0 i to pytanie jest wysokie w google. – Thomas

Odpowiedz

12

Wygląda na to, że zakładki (statyczne) nadpisują to, co jest przekazywane do aktywnego po uruchomieniu dyrektywy. Zakładam, że to błąd. Szybkie i brudne, można ustawić limit czasu z 0 sekundowym opóźnieniem, aby ustawić stan aktywny. Przynajmniej w plunkr, to nie powoduje migotania. W kontrolerze:

$scope.data = {}; 
$timeout(function() { 
    $scope.data.static2 = true; 
}, 0) 

http://plnkr.co/edit/3KbdKh?p=preview

3

Występuje problem we wszystkich wersjach kątowej-ui/bootstrap zapisu do wersji 0.6.0:

http://plnkr.co/edit/73lm068buZf851h47FVQ?p=preview

działa w branży bootstrap3 które musisz sam zbudować:

http://plnkr.co/edit/uOASvZ71DzgZqODmHQP8?p=preview

+1

dzięki za informacje. Jeśli ludzie są ciekawi [przeciągnij # 834] (https://github.com/angular-ui/bootstrap/pull/834) poprawiono ten problem. Usunięcie linii 237-239 to kluczowe zmiany (poprawiłem moją wersję kątowego interfejsu użytkownika z tymi zmianami - niezależnie doszedłem do tego samego rozwiązania). – Amir

2

miałem ten problem dzisiaj i znalazłem najkrótszą drogę do poruszania się to żeby ustawić go przy NG-INIT:

<tabset justified="true" ng-init="tabs[initialTab].isActive = true"> 
    <tab heading="Static 1" active="tabs.Inprogress.isActive"></tab> 
    ... 
+0

Arghhh - dziękuję, dziękuję. Mogłem wybrać dowolną kartę inną niż pierwsza programowo - z ng-init, nawet ta pierwsza działa teraz. Straciłem 2 godziny prób - tak frustrujące! – Leo

0

Twój kod działa w najnowszych wersjach UI-bootstrap (testowane wersje 0.7 0,0 przez 0.13.0 włącznie):
http://plnkr.co/edit/SzeTqXVSd8CiKL9nkjDC?p=preview

HTML:

<!DOCTYPE html> 
<html ng-app="myApp"> 

    <head> 
    <script data-require="[email protected]" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script> 
    <script data-require="[email protected]" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script> 
    <link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="ExampleController as example"> 
    <tabset> 
     <tab heading="Static 1" active="data.static1">Static content1</tab> 
     <tab heading="Static 2" active="data.static2">Static content2</tab> 
    </tabset> 
    </body> 

</html> 

JavaScript:

angular.module("myApp", ["ui.bootstrap"]) 
    .controller("ExampleController", function ($scope) { 
    $scope.data = { 
     static1: false, 
     static2: true 
    }; 
    }); 

Jeden haczyka, aby mieć świadomość, że to nie będzie działać, jeśli dyrektywa ngController jest umieszczony na <tabset> elementu. W powyższym kodzie umieściłem dyrektywę ngController na elemencie <body>.

Powiązane problemy