全高角度 UI 手风琴

Question

无论手风琴组中的内容有多大，我都在尝试使 Angular UI 手风琴全高。

Se JSFiddle：http://jsfiddle.net/hanspc/TBz9F

我的 HTML：

<div id="wrapper" ng-controller="caMain">
<div style="float: left; height: 100%; width: 300px; border-right: 1px solid #000">
<ca-accordion close-others="sidebar.oneAtATime">
    <ca-accordion-group heading="Static Header, initially expanded"  is-open="sidebar.status.isFirstOpen" is-disabled="sidebar.status.isFirstDisabled">
        This content is straight in the template.
    </ca-accordion-group>
    <ca-accordion-group heading="Dynamic Body Content">
        <p>The body of the accordion group grows to fit the contents</p>
    </ca-accordion-group>
    <ca-accordion-group is-open="sidebar.status.open">
        <ca-accordion-heading>
            I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': sidebar.status.open, 'glyphicon-chevron-right': !sidebar.status.open}"></i>
        </ca-accordion-heading>
        This is just some content to illustrate fancy headings.
    </ca-accordion-group>
</ca-accordion>
</div>

Lorem ipsum dolor sit amet...

</div>

我希望手风琴成为我的左栏，高度为 100%（如 jQuery 的 heightStyle=fill）。

有人可以告诉我怎么做吗？我已经考虑过完全重写指令，但我认为必须有办法处理原始的 Accordion 指令。 在我的 JSfiddle 中，我克隆了 angular UI 手风琴指令（称为 ca-accordion），但没有任何改变。只是为了可以在需要时向指令添加更改。

解决方案是 Angular 还是纯 CSS（尝试过但没有运气）？

提前致谢！

Answer 1

现在解决了。

我更改了 UI 手风琴指令（基于源代码创建了一个新的并更改了它）。

这就是我所做的：

1. 在 $window 上向我的控制器添加了一个 resize 事件，每次窗口大小改变时都会更改一个简单的布尔变量
2. 为包含手风琴（高度：100%）的元素创建了一个指令，并在调整大小范围布尔值上有一个观察者。这触发了一个读取手风琴容器高度的函数。

3. 添加了一个名为 fullHeight 的额外手风琴配置选项，也可以使用以下方式设置：<ca-accordion full-height="true">

4. 将 ng-style="styles" 添加到 <div class="panel-body" ng-style="styles" ng-transclude></div>

5. 在手风琴控制器中添加了以下内容：

   var fullHeight = angular.isDefined($attrs.fullHeight) ? $scope.$eval($attrs.fullHeight) : caAccordionConfig.fullHeight;
   
   // Create watcher for height changes if needed
   if(fullHeight){
       var that = this;
       $scope.$watch('screen.height', function(value) {
           that.height = value;
           that.panelHeight = that.calcHeight(value);
       });
   }
   
   this.calcHeight = function(screenHeight){
       var height = 0;
       height += $scope.sidebar.searchPanelHeight;
   
       for (var k=this.groups.length - 1; k >= 0; k--) {
           if(!this.groups[k].isOpen || 1 == 1){
               var tmpH = this.groups[k].returnHeight();
               height += tmpH;
           }
       }
   
       var panelHeight = screenHeight-height;
       $scope.sidebar.activePanelHeight = panelHeight;
       return panelHeight;
   };
   

6. 添加了一个观察者 + 一个函数来将手风琴面板的高度返回到手风琴组指令：

           scope.returnHeight = function(){
               return element.find(".panel-heading").outerHeight(true);
           }
   
           // Watch for screen height changes
           scope.$watch(function() { return caAccordionCtrl['height']; }, function(value) {
               if ( value ) {
                   scope.styles = {
                       "height": caAccordionCtrl.panelHeight+"px"
                   }
               }
           });
   

所以我的解决方案是克隆 Angular UI 手风琴代码并根据我的需要对其进行调整。

看我的小提琴：http://jsfiddle.net/hanspc/TBz9F/