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>

Таким образом, вам не нужно хранить логику представления в контроллере, а состояние каждого расширяемого элемента управляется индивидуально / отдельно от области действия.