Вкладки Angular UI - не могут менять вкладки с помощью кнопки внутри вкладки

Question

Я пытаюсь изменить активную вкладку с помощью кнопки внутри директивы tab uib-tabset, но кнопка работает только вне этой директивы.

Что я делаю неправильно?

Вот код:

<button type="button" class="btn btn-default btn-sm" ng-click="active = 0">Select first tab - exterior button</button>

<div class="tabs-container">
    <uib-tabset active="active">
        <uib-tab index="0" heading="tab one">
            tab one
        </uib-tab>
        <uib-tab index="1" heading="tab two">
            tab two
            <button type="button" class="btn btn-default btn-sm" ng-click="active = 0">Select first tab - internal button</button>
        </uib-tab>
        <uib-tab index="2" heading="tab three">
            tab three
        </uib-tab>
    </uib-tabset>
</div>

Answer 1

ng-click в вашей директиве uib-tab в вашем случае пытается записать переменную во внешнюю область видимости, но создает локальную переменную с тем же именем (активная) в локальной области видимости, тем самым разрывая соединение с внешней областью видимости. Самый простой способ - добавить $parent.$ Parent к вашему внутреннему клику:

ng-click="$parent.$parent.active = 0"

который достигнет правильной внешней области видимости (внешняя область видимости -> uib-tabset -> uib-tab) и затем изменит свою переменную,

Другое лучшее решение - использовать объекты и изменять их свойства (например, model.active) при взаимодействии между родительскими и дочерними областями:

<button type="button" 
        class="btn btn-default btn-sm" 
        ng-click="model.active = 0">
  Select first tab - exterior button
</button>

<div class="tabs-container">
  <uib-tabset active="model.active">
    <uib-tab index="0" heading="tab one">
        tab one
    </uib-tab>
    <uib-tab index="1" heading="tab two">
        tab two
        <button type="button" 
                class="btn btn-default btn-sm" 
                ng-click="model.active = 0">
          Select first tab - internal button
        </button>
    </uib-tab>
    <uib-tab index="2" heading="tab three">
        tab three
    </uib-tab>
  </uib-tabset>
</div>

Answer 2

Разумно уверен, что есть некоторая недопонимание между двумя областями на странице (uib-tabset скорее всего создает свою собственную область, которая не отслеживает ваши области active переменная, а мы могли бы хотеть).

Проверьте этот рабочий поршень - вы заметите, что он использует ctrl as Синтаксис, чтобы более четко определить, какую переменную области установить с ng-click,

Вот вопрос, касающийся вопросов двустороннего связывания в рамках uib-tabset найденная здесь область действия, которая является вероятной причиной проблемы. Я бы предложил использовать ctrl as или вы можете привязать к функции $scope для установки $scope.active вместо привязки к active сама переменная.