角引导崩溃的奇怪行为 [英] Strange behaviour of angular bootstrap collapse

问题描述

我面临着UIB崩溃的奇怪行为。
假设我有元素的列表，我想每个人要崩溃了。此外，我想刷新其内容定期依赖的东西。

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.

例如：我有一些项目，他们每个人都有说明它由部分路段。我可以挑选项目和说明部分应与项目的描述内容来填充。问题是，每次我刷新其内容，部分路段坍塌（尽管我设置UIB倒闭的事实的假的）

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)

我的控制器：

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节做过渡，点击第三个按钮导致所有部分的过渡。

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.

见plunkr

任何想法？

UPD：如果的 $ scope.sections 的是对象的数组，而不是原语，那么所有的部分都在每3例过渡。它是如此的丑陋...

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

推荐答案

您没有刷新现有内容，你每一次，这将使得添加新的阵列 NG-重复删除旧的DOM元素并插入新的。

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

演示： http://plnkr.co/编辑/ 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.

例如：

$scope.nextObject = function(nextOffset) {

  j += nextOffset;

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

演示： http://plnkr.co/编辑/ STxy1lAUGnyxmKL7jYJH？p = preVIEW

从倒塌源$ C ​​$ C：

From the collapse source code:

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

在添加新项手表监听器将执行 shouldCollapse 将永远是假的你的情况，因此将执行展开功能。

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.

的展开函数始终执行动画：

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