Angular UI Bootstrap - 折叠选项卡内容

Question

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

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

在控制器中，我将 $scope.isCollapsed 设置为 true。每个选项卡都有调用 openCollapse() 的 ng-click，它将 isCollapsed 设置为 false。如果我在标签中添加了 collapse="isCollapsed" 指令，那么标签也会消失，而不仅仅是内容。

我该如何解决这个问题？

Answer 1

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

我遇到的主要问题是范围问题和包含问题。我还没有遇到嵌入（我对 Angular 还很陌生），所以我仍然在思考它。 我尝试了几种不同的方法，如果我能更好地理解嵌入，那么其他几种方法可能奏效，但最后，这对我来说是最简单的，而且我得到了它的工作原理。 p>

所以基本上我必须做 4 件主要的事情才能让它发挥作用。

1. 打开 ui.bootstrap-tpls-0.11.0.js（或您使用的任何版本）。搜索angular.module("template/tabs/tabset.html"。在<div class=\"tab-content\">\n" 标签中，添加collapse=\"isCollapsed\"。
   标签（以及其中的所有内容）在编译时会被替换，这是替换它的代码，因此我们可以直接将 collapse 指令放在我们需要的地方。

2. 同样在 ui.bootstrap-tpls-0.11.0.js 中，搜索 .directive('tabset'。在link: function(scope, element, attrs) { 内，添加：scope.isCollapsed = scope.$parent.isCollapsed'
   在这里，我们将嵌入范围的 isCollapsed 链接到在您的初始控制器中设置的 isCollapsed（您也可以在下一步中将 initialize isCollapsed 放入控制器中，而不是仅仅链接它，但我已经在我的控制器和我将它链接起来尝试做另一种方法）

3. 仍然在 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;
   });
   

   我们在这里所做的是在标签集的嵌入范围内添加事件侦听器。最后我们要做的是创建一个事件广播。我还添加了一个 .$watch()，以便我可以查看它是否正在更改：

   $scope.$watch('isCollapsed', function(){
       console.log("isCollapsed has changed, it is now: " + $scope.isCollapsed);
   });
   

4. 最后，在视图的控制器（或包含 .openCollapse() 和 .closeCollapse() 的任何控制器）中，将您的功能从编辑此范围 isCollapsed 更改为：

   $scope.openCollapse = function(){ 
       $rootScope.$broadcast("openCol");
   }
   $scope.closeCollapse = function($event){
       $rootScope.$broadcast("closeCol");
   }
   

   这将广播 TabsetController 中正在监听的事件。所以现在 isCollapsed 的正确范围正在改变，并反映在代码中。现在看那个可爱的标签内容折叠。

如果我没有完全正确地使用我的术语，或者我的工作方式是否存在固有的错误，请告诉我。或者，简单地说，如果有其他方法。随时接受建议:)