全高角度 UI 手风琴
Posted
技术标签:
【中文标题】全高角度 UI 手风琴【英文标题】:Full height angular UI accordion 【发布时间】:2014-09-25 17:37:26 【问题描述】:无论手风琴组中的内容有多大,我都在尝试使 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(尝试过但没有运气)?
提前致谢!
【问题讨论】:
【参考方案1】:现在解决了。
我更改了 UI 手风琴指令(基于源代码创建了一个新的并更改了它)。
这就是我所做的:
-
在 $window 上向我的控制器添加了一个 resize 事件,每次窗口大小改变时都会更改一个简单的布尔变量
为包含手风琴(高度:100%)的元素创建了一个指令,并在调整大小范围布尔值上有一个观察者。这触发了一个读取手风琴容器高度的函数。
添加了一个名为 fullHeight 的额外手风琴配置选项,也可以使用以下方式设置:<ca-accordion full-height="true">
将 ng-style="styles" 添加到 <div class="panel-body" ng-style="styles" ng-transclude></div>
在手风琴控制器中添加了以下内容:
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;
;
添加了一个观察者 + 一个函数来将手风琴面板的高度返回到手风琴组指令:
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/
【讨论】:
嗯,忘了接受我自己的答案,现在我不能了?谁能告诉我为什么有两个小时的限制?以上是关于全高角度 UI 手风琴的主要内容,如果未能解决你的问题,请参考以下文章