Question

我遇到了uib-collapse的奇怪行为。让我们假设我有一个元素列表，我希望每个元素都被折叠。此外，我想定期刷新其内容依赖于某些东西。

例如：我有一些项目，每个项目的描述都包含一些部分。我可以选择项目和描述部分应填充项目的描述内容。问题是，每次刷新其内容时，某些部分都会崩溃（尽管事实上我将uib-collapse设置为 false ）

我的控制器：

var i = 0;
$scope.sections = [0,1,2];
$scope.next = function(nextOffset) {
    i+=nextOffset;
    $scope.sections = [i, i+1, i+2]
}

我的模板：

<button ng-click="next(1)" style="margin-bottom: 10px">Next item</button>
<button ng-click="next(2)" style="margin-bottom: 10px">Next next item</button>
<button ng-click="next(3)" style="margin-bottom: 10px">Next next next item</button>

<div ng-repeat="section in sections">
  <div uib-collapse="false">
    <div class="well well-lg">{{ section }}</div>
  </div>
</div>

所以当我点击第一个按钮时，只有一个部分会转换。当我点击第二个时，2个部分会进行转换，单击第三个按钮会导致所有部分转换。

See plunkr

有什么想法吗？

UPD：如果 $ scope.sections 是对象数组而不是基元数组，那么所有部分都会在3种情况下都有转换。真是太丑了......

Answer 1

您没有刷新现有内容，每次都要添加新数组，这将使ng-repeat删除旧DOM元素并插入新元素。

如果您尝试track by $index，您会发现不同之处：

<div ng-repeat="section in primitiveSections track by $index">

演示： http://plnkr.co/edit/hTsVBrRLa8nWXhaqfhVK?p=preview

请注意，track by $index可能不是您在实际应用中所需的解决方案，我只是将其用于演示目的。

您可能需要的是修改数组中的现有对象。

例如：

$scope.nextObject = function(nextOffset) {

  j += nextOffset;

  $scope.objectSections.forEach(function (o, i) {
    o.content = j + i;
  });
};

演示： http://plnkr.co/edit/STxy1lAUGnyxmKL7jYJH?p=preview

更新

来自崩溃源代码：

scope.$watch(attrs.uibCollapse, function(shouldCollapse) {
  if (shouldCollapse) {
    collapse();
  } else {
    expand();
  }
});

当添加新项目时，监听监听器将执行，shouldCollapse在您的情况下将始终为false，因此它将执行expand功能。

expand函数将始终执行动画：

function expand() {
  element.removeClass('collapse')
    .addClass('collapsing')
    .attr('aria-expanded', true)
    .attr('aria-hidden', false);

  if ($animateCss) {
    $animateCss(element, {
      addClass: 'in',
      easing: 'ease',
      to: {
        height: element[0].scrollHeight + 'px'
      }
    }).start().finally(expandDone);
  } else {
    $animate.addClass(element, 'in', {
      to: {
        height: element[0].scrollHeight + 'px'
      }
    }).then(expandDone);
  }
}

如果这是预期的行为，我不知道，但这就是它发生的原因。

Answer 2

这是对原始ui-bootstrap库的评论:(并且新的uib前缀指令不符合此评论。）

//重要提示：在添加＆＃34;折叠＆＃34;之前必须设置高度。类。否则，浏览器会尝试从高度0开始设置动画（in 将类折叠到这里给定的高度。

使用已弃用的＆＃34;崩溃＆＃34;指令代替新的＆＃34; uib-collapse＆＃34;直到它得到修复。

角度引导崩溃的奇怪行为

2 个答案:

更新