angular bootstrap 崩溃的奇怪行为

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();
  }
});

添加新项目时，将执行 watch 侦听器，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 前缀指令不符合此评论。）

// IMPORTANT: The height must be set before adding "collapsing" class. Otherwise, the browser attempts to animate from height 0 (in collapsing class) to the given height here.

使用已弃用的 "collapse" 指令而不是新的 "uib-collapse" 直到它得到修复。

angular bootstrap 崩溃的奇怪行为

Strange behaviour of angular bootstrap collapse

angularjs

angular-ui-bootstrap

angular-bootstrap

更新