如何從控制器訪問角引導UI

我想在我的需求中使用angularJS引導tabset，我需要添加下一個按鈕讓客戶切換選項卡。這裏是我的代碼：如何從控制器訪問角引導UI

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

在控制器「點擊率」：

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

正如你所看到的，我設置爲活動的每個選項卡，它工作正常時，頁面加載，我可以切換到tab2後我點擊下一步，但如果我點擊標籤頭切換回來，並嘗試再次點擊下一個按鈕，它沒有工作，這可能是指令是隔離作用域的原因，我不能訪問它的活動，但如果是的話，爲什麼我可以第一次轉換？有什麼辦法可以做到嗎？

來源

2016-06-22 linyuanxie

你是什麼意思，通過點擊標籤頭？你能指定一下嗎？這是否意味着您的tabt1和tabt 2本身是按鈕，應該在點擊它們時執行切換操作？ –

一切正常，我只是添加一個下一個按鈕，讓客戶從tab1切換到tab2，tab-head是標題，我們通常用它來切換標籤。 – linyuanxie

[docs]（https://angular-ui.github.io/bootstrap/#/tabs）實際上有一個以編程方式設置活動選項卡的示例。它在選項卡上使用'index'，'active'屬性位於''元素上。你試過這樣做嗎？ – Lex

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

來源

2016-06-22 18:31:58 Lex

謝謝老兄，這是我想要的:) – linyuanxie

使用一個範圍變量枚舉通過選項卡索引與下一個或許上一個按鈕。

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。

來源

2016-06-22 18:41:31 jbrown

如何從控制器訪問角引導UI

回答

相關問題