angularjs - 如何动态设置 uib-accordion-group 的样式

Question

我在 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)

Answer 1

如果您在 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 不匹配: