angularjs - Angular 自举崩溃的奇怪行为

Question

我遇到了 uib-collapse 的奇怪行为。 假设我有一个元素列表，并且我希望将每个元素折叠起来。另外我想根据某些东西定期刷新其内容。

例如:我有一些项目，每个项目都有由一些部分组成的描述。我可以选择项目，描述部分应该填充项目的描述内容。问题是，每次我刷新其内容时，某些部分都会折叠(尽管我将 uib-collapse 设置为 false)

我的 Controller :

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是对象数组，而不是基元数组，则所有部分在三种情况下都有转换。太丑了...

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

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