我在 Angular 网站中创建了一个 uib-accordion,并且可以获得我想要的大部分功能,动态内容也会相应变化。
我在动态设置 uib-accordion-group
样式时遇到问题。
<uib-accordion-group panel-class="panel-danger">
<uib-accordion-heading>
Accordion Heading 1
很好,整个标题颜色为红色/粉色,我想根据页面上的其他变量将其更改为 panel-warning
或 panel-info
。
<uib-accordion-group panel-class="{{getPanelColor()}}">
<uib-accordion-heading>
Accordion Heading 1
该函数似乎被正确调用,并通过 ng-click 在其他地方正确触发。
我似乎无法动态更改面板类使用的值。因此,在这种情况下, getPanelColor() 根据其他变量返回“panel-danger”、“panel-info”或“panel-warning”。如果我在另一个 div 的页面上打印这个返回值或者它正确更改的任何内容。如果我刷新页面,则会为更改后的面板组显示正确的颜色。
是否有另一种设置颜色的方法 - 我不知道 Accordion 组的类是什么。我尝试过在面板中更改 div 的颜色,但这是一个子元素,不会更改整个标题的颜色。
非常感谢任何帮助。 (如果问题不清楚,我会提出一个 JSFiddle)
最佳答案
如果您在 panel-class
更改并且 Angular 消化了更改后查看 HTML,您将看到这一行:
<div class="panel panel-danger" ... panel-class="panel-default">
也就是说,class
和 panel-class
之间不匹配(前者具有 panel-danger
,而后者具有面板默认
)。 uib-accordion-group
指令根本无法以所需的方式处理更改。
一种解决方法是将 ng-if
添加到整个组:
<uib-accordion-group ng-if="render" panel-class="{{getPanelColor()}}">
...在您想要更改panel-class
之前,暂时删除整个元素,以便 Angular 从头开始重新渲染它。希望以下代码能够解释其原理:
$scope.render = true;
$scope.panelColor = 'panel-danger';
$scope.setPanelColor = function(val) {
$scope.panelColor = val;
$scope.render = false;
$timeout(function () {
$scope.render = true;
});
};
$scope.getPanelColor = function() {
return $scope.panelColor;
};
查看正在实现的提案:http://plnkr.co/edit/XfJiPnNi1z4F9cgIVxxw?p=preview 。按“清除面板颜色确定”。
缺点是移除元素会导致一些闪烁。
我添加了另一个按钮“清除面板颜色失败”,该按钮显示失败案例中发生的情况。这是按下按钮后 HTML 的样子,请注意 panel-danger
与 panel-default
不匹配:
关于angularjs - 如何动态设置 uib-accordion-group 的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33843644/