Как установить активную на angularjs вкладку начальной загрузки со статическим контентом

Question

Я использую Angular Bootstrap UI для отображения вкладки со статическим содержимым. Я включаю скрипт начальной загрузки ui-bootstrap-tpls-0.6.0.min.js.

вот моя разметка:

<tabset>
    <tab ng-show="$parent.hideme" ng-class="{active:$parent.hideme}">
        <tab-heading>
            tab1
        </tab-heading>
        <div>
            tab content 1
        </div>
    </tab>
    <tab ng-hide="$parent.hideme" ng-class="{active:!$parent.hideme}">
        <tab-heading>
            tab2
        </tab-heading>
        <div>
            tab content 2
        </div>
    </tab>
</tabset>

Вот контроллер

function myController($scope) {
    $scope.hideme = false;
});

Если на вкладке не применяется класс ng, он работает хорошо, за исключением того, что когда на 1-й вкладке скрыто и на 2-й вкладке отображается ($scope.hideme = false), содержимое 1-й вкладки будет отображаться как avtive.

Если я добавил ng-class, это вызвало ошибку в angularjs. Ошибка: [$parse: синтаксис] http://errors.angularjs.org/undefined/$ parse / syntax? P0=%7B&p1=is%20an%20 неожиданно%20token&p2=16&p3=%7Bactive%3Afalse%7D%20%7Bactive%3A%20active%2C%20disabled%3A%20disabled%7D& р4=%7Bactive%3A%20active%2C%20disabled%3A%20disabled%7D

Как правильно (или правильный синтаксис) сделать конкретную вкладку активной?

Answer 1

Я рекомендую не пытаться делать логику показа / скрытия. Я также был разочарован этим, потому что в документации по вкладке начальной загрузки пользовательского интерфейса показана только навигация к вкладкам, созданным связыванием с помощью ng-repeat.

Но я считаю, что вы можете ссылаться на вкладки в директиве tabset как $parentScope.tabs. Так что простая навигация возможна с помощью $parent.tabs[2].select():

<tabset>
  <tab heading="Tab 1">
    <button class="btn btn-success" ng-click="$parent.tabs[2].select()">Go to Tab 3</button>
  </tab>
  <tab heading="Tab 2">
    <p>Tab 2 contents</p>
  </tab>
  <tab heading="Tab 3">
    <button class="btn btn-danger" ng-click="$parent.tabs[0].select()">Back to Tab 1</button>
  </tab>
</tabset>

У меня есть пример работающего Плункера, если это поможет.