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

Question

Я пытаюсь использовать угловой загрузочный талон anguleJS, в моем требовании мне нужно добавить следующую кнопку, чтобы клиент мог переключать вкладки. Вот мой код:

<div ng-controller='ctr'> 
    <tabset> 
    <tab active='sqTab' heading="tab1"> 
     tabt 1  
    </tab> 
    <tab active='psTab' heading="tab2"> 
     tabt 2  
    </tab> 
    </tabset> 
    <button click='next()')>next</button> 
</div> 

В контроллере «CTR»:

$scope.sqTab = true; 
$scope.psTab = false; 
$scope.next = function(){ 
$scope.sqTab = false; 
$scope.psTab = true; 
} 

Как вы можете видеть, я установил активный для каждой вкладки, она отлично работает, когда нагрузка на страницу, я могу переключить на tab2 после того, как я нажму дальше, но если я нажму кнопку Tab, чтобы переключиться обратно, и попробуйте снова нажать следующую кнопку, это не сработает, возможно, это причина, по которой директива является изолированной областью, я не могу получить доступ к ней, но если да, то почему я могу переключиться в первый раз? Могу ли я это сделать?

Answer 1

Вы не использовали директивы bootstrap AngularJS-UI. Вот рабочий образец, основанный на том, что у вас есть.

Javascript

angular.module('app', ['ui.bootstrap']) 
    .controller('ctrl', function($scope) { 
     $scope.activeTab = "sqTab"; 
     $scope.next = function() { 
      $scope.activeTab = "psTab"; 
     } 
    }); 

HTML

<div ng-app="app" ng-controller="ctrl"> 
    <form class="tab-form-demo"> 
     <uib-tabset active="activeTab"> 
      <uib-tab index="'sqTab'" heading="tab1"> 
       Here is some content on Tab 1 
      </uib-tab> 
      <uib-tab index="'psTab'" heading="tab2"> 
       Here is some different content on Tab 2 
      </uib-tab> 
     </uib-tabset> 
     <button ng-click="next()">next</button> 
    </form> 
</div> 

Обратите внимание, что при использовании индекса строки вы должны поставить кавычки вокруг него. Также обратите внимание, что необходимо использовать версию всех загрузочных элементов uib-. Здесь приведен рабочий код JSFiddle с использованием вышеуказанного кода.

Answer 2

Используйте переменную scope для перечисления индексов вкладки со следующей и, возможно, предыдущей кнопкой.

HTML

<button ng-click="previous()" ng-disabled="activeTab===0">Previous</button> 
    <button ng-click="next()" ng-disabled="activeTab===1">Next</button> 
    <div> 
    <uib-tabset active="activeTab"> 
     <uib-tab index="0" heading="Tab 0"> 
     <div>This is tab 0</div> 
     </uib-tab> 
     <uib-tab index="1" heading="Tab 1"> 
     <div>This is tab 1</div> 
     </uib-tab> 
    </uib-tabset> 
    </div> 

Контроллер

$scope.activeTab = 0; 

    $scope.next = function() { 
    $scope.activeTab += 1; 
    }; 
    $scope.previous = function() { 
    $scope.activeTab -= 1; 
    }; 

Вот рабочий plunk.