2013-07-17 2 views
8

Кажется, я не могу установить вкладку inital в угловом бутстровом. Он всегда устанавливает активную вкладку слева.Установка начальной статической вкладки в угловой бутстрап

Учитывая HTML:

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

и ЯШ:

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

ВИДЕТЬ Plunker

Update 6 Авг 2013: Теперь неподвижную вверх по течению увидеть github issue.

+0

Я добавил новый ответ, потому что это все еще проблема в версии 0.6.0, и этот вопрос высок в google. – Thomas

ответ

12

Кажется, что (статические) вкладки перезаписывают все, что передается активному при запуске директивы. Я предполагаю, что это ошибка. Быстро и грязно, вы можете использовать таймаут с задержкой 0 секунд для установки активного состояния. По крайней мере, в plunkr это не вызывает мерцания. В контроллере:

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

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

3

Существует проблема во всех версиях угловом-интерфейса/начальной загрузки Шифрование до версии 0.6.0:

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

работает в bootstrap3 отрасли которые вы должны построить самостоятельно:

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

+1

благодарит за информацию. В случае любопытства людей [pull # 834] (https://github.com/angular-ui/bootstrap/pull/834) исправлена ​​эта проблема. Исключение строк 237-239 являются ключевыми изменениями (я исправил мою версию углового ui с этими изменениями - я самостоятельно пришел к одному и тому же исправлению). – Amir

2

Я имел этот вопрос сегодня, и я нашел самый короткий путь, чтобы обойти это было установить его с помощью нг-INIT:

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

Arghhh - спасибо, спасибо. Я мог бы выбрать любую вкладку, отличную от первой, программно - с помощью ng-init, даже если первая работает. Я потерял 2 часа - так разочаровывает! – Leo

0

Ваш код работает в последних версиях УИ-загрузчике (протестированные версии 0.7 +0,0 через 0.13.0 включительно):
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 
    }; 
    }); 

Один Гоча, чтобы быть в курсе, что это не будет работать, если директива ngController помещается на <tabset> элемента. В приведенном выше коде я разместил директиву ngController на элементе < >.

Смежные вопросы