Angular Bootstrap 手风琴中隐藏的动态内容
Dynamic content hidden in Angular Bootstrap accordion
我有一个呈现动态内容的手风琴。我的应用程序不包含 ngAnimate，因为客户不需要动画。但是，我看到一个问题，即当不包含 ngAnimate 时动态内容会被隐藏。当它被添加回来时，内容呈现得很好。场景是您展开手风琴元素。从那里，您可以执行一个动作，该动作将在手风琴体内的动作下方呈现动态内容。一旦超过手风琴体的高度，内容就会被切断。折叠和展开手风琴元素将强制重新计算主体，所有内容都将正确显示。我创建了一个 Plunker 来演示这个问题。
Java脚本代码：
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.blah = ['blah'];
$scope.view = false;
$scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
});
angular.module('ui.bootstrap.demo').directive('mydir',['$compile',function($compile){
return{
link:function(scope, element, attrs){
scope.changeMe = function(){
scope.blah.push('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor mi, molestie sit amet malesuada quis, mollis in mi. Aenean non lacus vel tortor sodales efficitur et in lectus. Aliquam erat volutpat. Nunc orci lectus, volutpat sed bibendum et, auctor id lacus. Suspendisse scelerisque lacinia turpis quis semper. Suspendisse metus tellus, finibus sit amet sollicitudin id, venenatis in urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris porttitor neque luctus, maximus ligula nec, tincidunt ipsum. Maecenas fringilla consequat nibh blandit rutrum. Etiam sed blandit ipsum, eu pretium mauris. Cras eget mauris ipsum. Vestibulum eu sodales diam.' +
'Integer tempus turpis sed malesuada pellentesque. Nam lacus eros, interdum a enim eget, consectetur auctor odio. Cras sit amet erat placerat, condimentum ante a, tempor dolor. Aenean vulputate augue quis erat finibus lobortis. Aenean sit amet elit tincidunt, elementum lorem et, aliquet quam. Sed vitae odio lobortis, lobortis lectus et, interdum arcu. Morbi faucibus eget turpis fermentum euismod. Nunc ullamcorper, metus id pretium sodales, turpis neque fringilla tellus, sed molestie neque justo eu mauris. Aenean iaculis ligula sed lacinia efficitur.' +
'Vivamus dolor mi, feugiat porttitor mollis sed, aliquam non nisi. Proin gravida augue risus, a faucibus magna tincidunt eget. Pellentesque bibendum gravida commodo. Cras sagittis, odio eget rhoncus ornare, lorem enim aliquam augue, id efficitur dui tortor at risus. Mauris enim erat, faucibus vel dictum sit amet, hendrerit sollicitudin eros. Cras condimentum dapibus augue. Ut ornare fringilla metus sollicitudin tempus. Vivamus sit amet pharetra urna.' +
'Suspendisse potenti. Integer eget vestibulum augue. Donec imperdiet arcu sit amet dui tincidunt sagittis sed eget arcu. Aliquam scelerisque non eros sed tincidunt. Vivamus non orci sed orci facilisis fringilla at ac eros. Integer vitae enim non lacus bibendum aliquet. Nullam congue convallis nulla, sed mattis enim dictum vel. Mauris in ante a libero gravida maximus et at lorem.' +
'Aenean commodo tempor felis, eget tincidunt erat fringilla a. Curabitur efficitur pulvinar tristique. Proin et euismod ex. Praesent et tortor et nisl posuere dapibus. Mauris arcu urna, aliquet id dignissim quis, pellentesque at velit. Ut tempus justo risus, non ultrices metus volutpat quis. Aliquam sit amet condimentum justo, id suscipit mi. Praesent laoreet elementum nibh, eu consectetur felis volutpat eu. Nulla auctor cursus ipsum, finibus porta leo aliquet eget. Donec in pulvinar nunc. Proin ultrices, purus sit amet finibus ornare, nisl justo faucibus arcu, et cursus ante arcu sit amet augue.;');
};
var template = '<button type="button" class="btn btn-default btn-sm" ng-click="changeMe()">Add content below</button><div ng-repeat="stuff in blah track by $index"><div ng-if="stuff.length > 5">{{stuff}}</div></div>';
element.empty();
element.html(template);
$compile(element.contents())(scope);
},
restrict:'E'
}
}]);
HTML 标记：
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel {{panelClass || 'panel-default'}}">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
<p>This demonstrates a hidden content issue when ng-animate is not present.</p>
<p>Click "Add content below". It will be mostly hidden. Then collapse and expand Header 1. The body will be recalculated and everything will be visible.</p>
<uib-accordion close-others="false">
<uib-accordion-group ng-init="status.open=true" is-open="status.open">
<uib-accordion-heading>
Header 1 - My dynamic content will disappear. <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
<div><mydir></mydir></div>
</uib-accordion-group>
<uib-accordion-group is-open="status.isFirstOpen">
<uib-accordion-heading>
Header 2 <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isFirstOpen, 'glyphicon-chevron-right': !status.isFirstOpen}"></i>
</uib-accordion-heading>
This content is straight in the template.
</uib-accordion-group>
</uib-accordion>
</div>
</body>
</html>
除非我误解了 Angular-UI Boostrap documentation，如果你想要动画，你只需要 ngAnimate。
有没有人遇到过这个问题并找到了解决方案？禁用动画时是否需要设置其他选项？我注意到即使不包含 ngAnimate，转换仍然存在。
我有一个呈现动态内容的手风琴。我的应用程序不包含 ngAnimate，因为客户不需要动画。但是，我看到一个问题，即当不包含 ngAnimate 时动态内容会被隐藏。当它被添加回来时，内容呈现得很好。场景是您展开手风琴元素。从那里，您可以执行一个动作，该动作将在手风琴体内的动作下方呈现动态内容。一旦超过手风琴体的高度，内容就会被切断。折叠和展开手风琴元素将强制重新计算主体，所有内容都将正确显示。我创建了一个 Plunker 来演示这个问题。
Java脚本代码：
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.blah = ['blah'];
$scope.view = false;
$scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
});
angular.module('ui.bootstrap.demo').directive('mydir',['$compile',function($compile){
return{
link:function(scope, element, attrs){
scope.changeMe = function(){
scope.blah.push('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor mi, molestie sit amet malesuada quis, mollis in mi. Aenean non lacus vel tortor sodales efficitur et in lectus. Aliquam erat volutpat. Nunc orci lectus, volutpat sed bibendum et, auctor id lacus. Suspendisse scelerisque lacinia turpis quis semper. Suspendisse metus tellus, finibus sit amet sollicitudin id, venenatis in urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris porttitor neque luctus, maximus ligula nec, tincidunt ipsum. Maecenas fringilla consequat nibh blandit rutrum. Etiam sed blandit ipsum, eu pretium mauris. Cras eget mauris ipsum. Vestibulum eu sodales diam.' +
'Integer tempus turpis sed malesuada pellentesque. Nam lacus eros, interdum a enim eget, consectetur auctor odio. Cras sit amet erat placerat, condimentum ante a, tempor dolor. Aenean vulputate augue quis erat finibus lobortis. Aenean sit amet elit tincidunt, elementum lorem et, aliquet quam. Sed vitae odio lobortis, lobortis lectus et, interdum arcu. Morbi faucibus eget turpis fermentum euismod. Nunc ullamcorper, metus id pretium sodales, turpis neque fringilla tellus, sed molestie neque justo eu mauris. Aenean iaculis ligula sed lacinia efficitur.' +
'Vivamus dolor mi, feugiat porttitor mollis sed, aliquam non nisi. Proin gravida augue risus, a faucibus magna tincidunt eget. Pellentesque bibendum gravida commodo. Cras sagittis, odio eget rhoncus ornare, lorem enim aliquam augue, id efficitur dui tortor at risus. Mauris enim erat, faucibus vel dictum sit amet, hendrerit sollicitudin eros. Cras condimentum dapibus augue. Ut ornare fringilla metus sollicitudin tempus. Vivamus sit amet pharetra urna.' +
'Suspendisse potenti. Integer eget vestibulum augue. Donec imperdiet arcu sit amet dui tincidunt sagittis sed eget arcu. Aliquam scelerisque non eros sed tincidunt. Vivamus non orci sed orci facilisis fringilla at ac eros. Integer vitae enim non lacus bibendum aliquet. Nullam congue convallis nulla, sed mattis enim dictum vel. Mauris in ante a libero gravida maximus et at lorem.' +
'Aenean commodo tempor felis, eget tincidunt erat fringilla a. Curabitur efficitur pulvinar tristique. Proin et euismod ex. Praesent et tortor et nisl posuere dapibus. Mauris arcu urna, aliquet id dignissim quis, pellentesque at velit. Ut tempus justo risus, non ultrices metus volutpat quis. Aliquam sit amet condimentum justo, id suscipit mi. Praesent laoreet elementum nibh, eu consectetur felis volutpat eu. Nulla auctor cursus ipsum, finibus porta leo aliquet eget. Donec in pulvinar nunc. Proin ultrices, purus sit amet finibus ornare, nisl justo faucibus arcu, et cursus ante arcu sit amet augue.;');
};
var template = '<button type="button" class="btn btn-default btn-sm" ng-click="changeMe()">Add content below</button><div ng-repeat="stuff in blah track by $index"><div ng-if="stuff.length > 5">{{stuff}}</div></div>';
element.empty();
element.html(template);
$compile(element.contents())(scope);
},
restrict:'E'
}
}]);
HTML 标记：
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel {{panelClass || 'panel-default'}}">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
<p>This demonstrates a hidden content issue when ng-animate is not present.</p>
<p>Click "Add content below". It will be mostly hidden. Then collapse and expand Header 1. The body will be recalculated and everything will be visible.</p>
<uib-accordion close-others="false">
<uib-accordion-group ng-init="status.open=true" is-open="status.open">
<uib-accordion-heading>
Header 1 - My dynamic content will disappear. <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
<div><mydir></mydir></div>
</uib-accordion-group>
<uib-accordion-group is-open="status.isFirstOpen">
<uib-accordion-heading>
Header 2 <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isFirstOpen, 'glyphicon-chevron-right': !status.isFirstOpen}"></i>
</uib-accordion-heading>
This content is straight in the template.
</uib-accordion-group>
</uib-accordion>
</div>
</body>
</html>
除非我误解了 Angular-UI Boostrap documentation，如果你想要动画，你只需要 ngAnimate。
有没有人遇到过这个问题并找到了解决方案？禁用动画时是否需要设置其他选项？我注意到即使不包含 ngAnimate，转换仍然存在。