Angular UI Bootstrap - 摺疊標籤內容

使用AngularJS UI指令進行引導，是否有任何方法使用標籤摺疊標籤內容？Angular UI Bootstrap - 摺疊標籤內容

我有幾個標籤/藥丸的內容，將開始摺疊（隱藏）。當任何選項卡被激活時，選項卡內容應該摺疊打開，並保持打開狀態，直到單擊關閉按鈕，這將關閉可摺疊部分。

在控制器中，我將$ scope.isCollapsed設置爲true。每個選項卡都具有調用openCollapse（）的ng-click，它將isCollapsed設置爲false。如果我向標籤添加collapse =「isCollapsed」指令，那麼標籤也會消失，而不僅僅是內容。

我該如何解決這個問題？

來源

2014-06-10 DanTheMan

您可以使用角度js的引導程序。請參閱http://angular-ui.github.io/bootstrap/ –

這花了一些搞清楚，但它是可能的！

我遇到的主要問題是範圍問題和變形。我還沒有遇到過變形（我對Angular相當陌生），所以我現在還在圍繞它進行一些修改。我嘗試了幾種不同的方法，如果我理解transclusion更好一些，可能可能已經工作，但最終，這對我來說是最簡單的，並且我能夠工作。

所以基本上我不得不做4個主要的事情來得到這個工作。

打開了ui.bootstrap-TPLS-0.11.0.js（或任何版本您正在使用＃）。搜索angular.module("template/tabs/tabset.html"。在<div class=\"tab-content\">\n"標記中，添加collapse=\"isCollapsed\"。
標記（以及其中的所有內容）在編譯時被替換，並且這是它被替換的代碼，所以這樣我們可以直接將摺疊指令放在需要的地方。
也在ui.bootstrap-tpls-0.11.0.js，請搜索.directive('tabset'。在link: function(scope, element, attrs) {的內部，請添加：scope.isCollapsed = scope.$parent.isCollapsed'
這裏我們將transcluded作用域的isCollapsed鏈接到在初始控制器中設置的isCollapsed（也可以在下一步中將初始化isCollapsed放置在控制器中，而不是將其鏈接起來，但我已初始化它在我的控制，我會聯繫它試圖做的另一種方法）
仍然在ui.bootstrap-TPLS-0.11.0.js，做.controller('TabsetController'搜索。在此控制器內部，添加：
```
$scope.$on('openCol', function(event){ 
    $scope.isCollapsed = false; 
}); 
$scope.$on('closeCol', function(event){ 
    $scope.isCollapsed = true; 
}); 
```
我們在這裏做的是在tabset的transcluded範圍內添加事件偵聽器。最後我們要做的是創建一個事件廣播。我還添加了$腕錶（），只是讓我可以看到，如果它發生了變化：
```
$scope.$watch('isCollapsed', function(){ 
    console.log("isCollapsed has changed, it is now: " + $scope.isCollapsed); 
}); 
```
最後，在視圖的控制器（或任何控制器包含.openCollapse()和.closeCollapse()），從編輯更改功能這個範圍isCollapsed，到：
```
$scope.openCollapse = function(){ 
    $rootScope.$broadcast("openCol"); 
} 
$scope.closeCollapse = function($event){ 
    $rootScope.$broadcast("closeCol"); 
} 
```
這將廣播在TabsetController中正在監聽的事件。所以現在isCollapsed的正確範圍正在改變，並且反映在代碼中。現在看那個可愛的標籤內容崩潰。

請讓我知道，如果我沒有得到我的術語很正確，或者如果我這樣做有一些天生的錯誤。或者，如果還有其他方法。始終接受建議:)

來源

2014-06-10 16:19:51 DanTheMan

Angular UI Bootstrap - 摺疊標籤內容

回答

相關問題