无论 Accordion 组中的内容有多大,我都试图制作一个全高的 Angular UI Accordion 。
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>
我希望 Accordion 成为我的左栏,高度=100%(就像 jQuery heightStyle=fill)。
有人可以告诉我该怎么做吗?我考虑过完全重写该指令,但我认为必须有一种方法可以处理原始的 Accordion 指令。 在我的 JSfiddle 中,我克隆了 Angular UI Accordion 指令(称为 ca-accordion),但没有任何改变。只是为了在需要时可以对指令进行更改。
解决方案是 Angular 还是纯 CSS(尝试过但没有成功)?
提前致谢!
最佳答案
现在解决了。
我改了UI accordion指令(根据源码新建了一个改了)
这是我做的:
- 在 $window 上向我的 Controller 添加了一个调整大小事件,每次窗口大小更改时都会更改一个简单的 bool 变量
- 为包含 Accordion (高度:100%)的元素创建了一个指令,并在调整范围 bool 值上设置了观察者。这触发了读取 Accordion 容器高度的函数。
添加了一个名为 fullHeight 的额外 Accordion 配置选项,也可以使用以下方式设置:
<ca-accordion full-height="true">
将 ng-style="styles"添加到
<div class="panel-body" ng-style="styles" ng-transclude></div>
将以下内容添加到 Accordion Controller 中:
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; };
添加了一个观察器 + 一个将 Accordion 面板的高度返回给 accordionGroup 指令的函数:
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 Accordion 代码并根据我的需要对其进行调整。
查看我的 fiddle :http://jsfiddle.net/hanspc/TBz9F/
关于angularjs - 全高 Angular UI Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25098478/