无论手风琴乐队的内容有多大,我都试图让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中,我克隆了角度UI手风琴指令(称为ca-accordion),但没有任何改变。只是为了可以在需要时添加对指令的更改。
是Angular中的解决方案还是纯CSS(尝试过没有运气)?
提前致谢!
答案 0 :(得分:3)
现在解决了。
我改变了UI手风琴指令(根据源代码创建了一个新的并改变了它)。
这就是我的所作所为:
添加了一个名为fullHeight的额外手风琴配置选项,也可以使用以下方式设置:<ca-accordion full-height="true">
添加了ng-style =&#34;样式&#34;到<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;
};
添加了一个观察者+一个函数,用于将手风琴面板的高度返回到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手风琴代码并根据我的需要调整它。