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>

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

Angular：我应该在哪里跟踪div＆＃39;扩展＆＃39;州？

1 个答案: