如何从控制器访问 angular bootstrap UI

Question

我正在尝试使用 angularJS bootstrap 标签集，在我的要求中，我需要添加一个下一步按钮让客户切换标签。这是我的代码：

<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;
}

如你所见，我为每个标签都设置了激活，页面加载时它工作正常，我可以在点击下一步后切换到标签2，但是如果我点击标签头切换回来，并尝试点击下一步再次按钮，它没有用，这可能是指令是隔离范围的原因，我无法访问它是活动的，但如果是这样，为什么我可以第一次切换？有什么办法可以做到吗？

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。

如何从控制器访问 angular bootstrap UI

How to access angular bootstrap UI from controller

angularjs

angular-ui-bootstrap