Question

使用AngularJS UI指令进行引导，有没有办法使用标记折叠选项卡内容？

我有几个包含内容的标签/药片，它们将开始折叠（隐藏）。激活任何选项卡后，选项卡内容应折叠打开，并保持打开状态，直到单击关闭按钮，这将关闭可折叠部分。

在控制器中，我将$ scope.isCollapsed设置为true。每个选项卡都有ng-click，它调用openCollapse（），将isCollapsed设置为false。如果我添加了collapse =＆＃34; isCollapsed＆＃34;对标签的指示权，然后标签也会消失，而不仅仅是内容。

我该如何解决这个问题？

Answer 1

花了一些时间搞清楚，但这是有可能的！

我遇到的主要问题是范围问题和转交。我还没有遇到过翻译（我对Angular来说还不够新鲜），所以我仍然在脑袋里绕了一下。我尝试了几种不同的方式，其他几个可能已经有效，如果我更好地理解了翻译，但最后，这对我来说是最简单的，我得到了它。

所以基本上我必须完成4项主要工作。

打开 ui.bootstrap-tpls-0.11.0.js （或您正在使用的＃版本）。搜索angular.module("template/tabs/tabset.html"。在<div class=\"tab-content\">\n"标记中，添加collapse=\"isCollapsed\"。
标记（以及其中的所有内容）在编译时被替换，这是替换它的代码，因此我们可以直接将collapse指令放在我们需要的位置。
同样在 ui.bootstrap-tpls-0.11.0.js 中，搜索.directive('tabset'。在link: function(scope, element, attrs) {内，添加：scope.isCollapsed = scope.$parent.isCollapsed'
在这里，我们将已转换范围的isCollapsed链接到初始控制器中设置的isCollapsed（您也可以在下一步中将initialize isCollapsed放在控制器中，而不仅仅是链接它，但我和＃39; d已经在我的控制器中对其进行了初始化，并且我尝试将其与另一种方法联系起来）
仍然在 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范围内添加事件监听器。我们最后要做的是创建一个事件广播。我还添加了一个。$ watch（），这样我就能看出它是否在改变：
```
$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的适当范围正在改变，并反映在代码中。现在观看可爱的标签内容崩溃。

请告诉我，如果我的术语不合适，或者我的方式本身存在什么问题。或者，简单地说，如果还有其他方法。始终接受建议：）

Angular UI Bootstrap - 折叠选项卡内容

1 个答案: