如何从控制器访问Angular Bootstrap UI

Question

我正在尝试使用AngularJS Bootstrap TabSet，在我的要求下，我需要添加一个下一个按钮以让客户切换选项卡。这是我的代码：

<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，但是如果我单击"选项卡"头要切换，然后尝试再次点击Next按钮，它不起作用，这可能是指令是孤立范围的原因，我无法访问它的活动，但是如果是的话，为什么我可以第一次切换？有什么办法可以做的？

Answer 1

您没有使用AngularJS-UI Bootstrap指令。这是一个基于您的工作样本。

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>

请注意，当使用字符串索引时，您必须在其周围放引号。另请注意，所有Bootstrap元素的uib-版本都需要使用。这是使用上述代码的JSFIDDLE。

Answer 2

使用示波器变量通过标签索引列举使用下一个和上一个按钮。

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。