angularjs - Angular：我应该在哪里跟踪 div 的“扩展”状态？

Question

我是 Angular 的新手，所以这是一个关于最佳实践和关注点分离的问题。

假设我有以下设置

<div ng-controller='SomeCtrl'>
  <div ng-repeat="item in list">
    <div class='item'>
      {{ item.name }}
    </div>
  </div>
</div>

假设每个“项目”都可以在视图中展开或折叠。因此，对于每个项目，状态都有一个布尔值。expanded = [...booleans...]在控制器中使用并ng-class="{ active: expanded[index] }"在每个视图上 使用是否合适？

我不确定在哪里保持每个项目的展开状态。

Answer 1

使用指令：

app.directive('expandable', function() {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
      var expanded = false;

      var toggleExpansion = function() {
        // Do something with elem here based on expanded variable
      };

      elem.click(function(e) {
        toggleExpansion();
      });
    }
  }
});

然后在你的html中写：

<div ng-controller="SomeCtrl">
  <div ng-repeat="item in list" expandable></div>
</div>

这样，您不必将视图逻辑保留在控制器中，并且每个可扩展项的状态都可以单独/与范围分开管理。