如何从控制器访问角度引导 UI答案

【问题标题】：How to access angular bootstrap UI from controller如何从控制器访问角度引导 UI
【发布时间】：2016-10-24 18:30:02
【问题描述】：

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

<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，但是如果我点击选项卡头切换回来，并尝试再次点击下一步按钮，它不起作用，这可能是指令是隔离范围的原因，我无法访问它的活动状态，但如果是这样，为什么我可以第一次切换？有什么办法可以吗？

【问题讨论】：

点击标签头是什么意思？你能具体说明一下吗？这是否意味着您的 tabt1 和 tabt 2 本身就是按钮，应该在单击它们时执行切换操作？
一切正常，我只是添加了一个next按钮让客户从tab1切换到tab2，tab-head是标题，我们通常用来切换标签。
docs 实际上有一个以编程方式设置活动选项卡的示例。它在选项卡上使用index，active 属性位于<tabset> 元素上。你试过这样做吗？
是的，active可以是索引或字符串。

标签： angularjs angular-ui-bootstrap

【解决方案1】：

您没有使用 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。

【讨论】：

谢谢老兄，这就是我想要的:)

【解决方案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。

【讨论】：