角度自举崩溃的奇怪行为 [英] Strange behaviour of angular bootstrap collapse

问题描述

我遇到了 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]}

我的模板:

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

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

见 plunkr

有什么想法吗?

UPD:如果 $scope.sections 是对象数组，而不是基元数组，则所有部分在 3 种情况下都有转换.太丑了……

解决方案

您不是刷新现有内容，而是每次添加新数组，这会使 ng-repeat 删除旧的 DOM元素并插入新元素.

如果您尝试使用 track by $index 您会看到不同之处:

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

演示: http://plnkr.co/edit/hTsVBrRLa8nWXhaqfhVK?p=预览

请注意，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=预览

<小时>

更新

来自折叠源代码:

scope.$watch(attrs.uibCollapse, function(shouldCollapse) {如果(应该折叠){坍塌();} 别的 {扩张();}});

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

expand 函数将始终执行动画:

function expand() {element.removeClass('折叠').addClass('折叠').attr('aria-expanded', true).attr('aria-hidden', false);如果($animateCss){$animateCss(元素，{addClass: 'in',缓和:'缓和'，到: {高度:元素[0].scrollHeight + 'px'}}).start().finally(expandDone);} 别的 {$animate.addClass(element, 'in', {到: {高度:元素[0].scrollHeight + 'px'}}).then(expandDone);}}

我不知道这是否是预期的行为，但这就是它发生的原因.

I faced with strange behaviour of uib-collapse. Let's assume I have a list of elements and i want each of them to be collapsed. Also i want to refresh its content periodically depend on something.

For example: i have some items and each of them have description which consists of some sections. I can pick item and description sections should be populated with item's description content. The problem is that each time i refresh its content, some sections are collapsing (despite the fact i set uib-collapse to false)

My controller:

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

My template:

<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>

So when i click first button, only one section does transition. When i click second, 2 section do transition and click to third button leads to all section transition.

See plunkr

Any ideas?

UPD: if $scope.sections is array of object, not of primitives, then all sections have transition in each of 3 cases. It is so ugly...

解决方案

You are not refreshing the existing content, you are adding new arrays each time, which will make ng-repeat remove the old DOM elements and insert new ones.

If you try with track by $index you will see the difference:

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

Demo: http://plnkr.co/edit/hTsVBrRLa8nWXhaqfhVK?p=preview

Note that track by $index might not be the solution you want in your real application, I just used it for demonstration purposes.

What you probably need is to just modify the existing objects in the array.

For example:

$scope.nextObject = function(nextOffset) {

  j += nextOffset;

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

Demo: http://plnkr.co/edit/STxy1lAUGnyxmKL7jYJH?p=preview

---

Update

From the collapse source code:

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

When a new item is added the watch listener will execute, shouldCollapse will always be false in your case so it will execute the expand function.

The expand function will always perform the animation:

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

If this is the intended behavior or not I don't know, but this is the reason why it happens.

这篇关于角度自举崩溃的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！