2

Не получается скрестить генератор с mdList.

Генератор:

$scope.inside = [...];

var generator        = function*() {
    var l = Math.ceil($scope.inside.length / 3);
    for (var i = 0; i < 3; i++) {
        yield $scope.inside.slice(l * i, l * (i + 1));
    }
};
$scope.insideDivided = generator();

Шаблон:

<md-list flex ng-repeat="column in [1,2,3]">
    <md-list-item ng-click="log(button.url)" ng-repeat="button in insideDivided.next().value">
        {{log(button)}}
        {{button.title}}
    </md-list-item>
</md-list>

Совершенно честно пишет в консоль {{log(button)}}

Object {title: "Скорости закрытия сообщений", url: "/inside/fake.html", $$hashKey: "object:13"} root.js:100 
Object {title: "Наиболее спамящие ноды", url: "/inside/fake.html", $$hashKey: "object:14"} root.js:100 
Object {title: "Неиспользуемые политики", url: "/inside/fake.html", $$hashKey: "object:15"}
....

Но при этом создает пустые <md-list>

    <!-- ngRepeat: column in [1,2,3] --><md-list flex="" ng-repeat="column in [1,2,3]" role="list" class="ng-binding ng-scope flex">

        <!-- ngRepeat: button in insideDivided.next().value -->
    </md-list><!-- end ngRepeat: column in [1,2,3] --><md-list flex="" ng-repeat="column in [1,2,3]" role="list" class="ng-binding ng-scope flex">

        <!-- ngRepeat: button in insideDivided.next().value -->
    </md-list><!-- end ngRepeat: column in [1,2,3] --><md-list flex="" ng-repeat="column in [1,2,3]" role="list" class="ng-binding ng-scope flex">

        <!-- ngRepeat: button in insideDivided.next().value -->
    </md-list><!-- end ngRepeat: column in [1,2,3] -->

В чем косяк? Почему цикл по md-list проходит, но сами элементы не создаются?

1

2 ответа 2

3

Проблема в том, как ангуляр узнает что view стабилизировался.

Так как во view используется функция - она будет вызываться до тех пор, пока не вернет одно и то же значение два раза (как минимум), тогда ангуляр считает, что изменения кончились и можно перерисовывать view.

Что происходит в примере в вопросе:

На каждый вызов insideDivided.next() будет возвращено следующее значение из генератора, и так как эти значения будут отличаться, ангуляр будет снова и снова запрашивать следующее значение, пока не попадутся подряд два одинаковых, либо последовательность не кончится, в этом случае value будет undefined, вот почему у тебя ничего не выводилось, либо пока не упадет из-за слишком большого числа вызовов digest цикла.


Как можно исправить:

  1. в генераторе возвращать подряд два одинаковых значения
  2. кешировать значение из генератора
  3. не использовать генераторы

например:

// Code goes here

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.inside = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    var cacheInsideGenerator = function*() {
      var l = Math.ceil($scope.inside.length / 3);
      for (var i = 0; i < 3; i++) {
        var res = $scope.inside.slice(l * i, l * (i + 1));
        yield res;
        yield res;
      }
    };

    $scope.cacheInsideGenerator = cacheInsideGenerator();

    var generator = function*() {
      var l = Math.ceil($scope.inside.length / 3);
      for (var i = 0; i < 3; i++) {
        yield $scope.inside.slice(l * i, l * (i + 1));
      }
    };
    $scope.cacheInWrapper = function() {
      var g = generator();
      var isFirst = true,
        cur;
      return function() {
        if (isFirst) {
          cur = g.next().value;
          isFirst = false;
        } else {
          isFirst = true;
        }
        return cur;
      };
    }();

    $scope.init = generator();
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
Hello
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="a in cacheInsideGenerator.next().value">
    {{a | json}}
  </div>

  <div ng-repeat="a in cacheInWrapper()">
    {{a | json}}
  </div>

  <div ng-repeat="a in withourGenerator">
    {{a | json}}
  </div>
</div>


Еще один обходной путь, для вложенного ng-repeat - использовать ng-init

// Code goes here

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.inside = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    var generator = function*() {
      var l = Math.ceil($scope.inside.length / 3);
      for (var i = 0; i < 3; i++) {
        yield $scope.inside.slice(l * i, l * (i + 1));
      }
    };

    $scope.insideDivided = generator();
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
Hello
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="n in [1,2,3]" ng-init="val=insideDivided.next().value">
    <div ng-repeat="a in val">
      {{a | json}}
    </div>
  </div>
</div>

1

В данный момент ng-repeat не может работать с итераторами (в том числе и с генераторами).

Ответ разработчика

Вольный перевод:

Возможность добавить поддержку для всех типов итераций обсуждалась ранее, и мы хотели бы ее добавить к ngRepeat (или в целом к $watchCollection()). К сожалению, из-за того, что ngRepeat/$watchCollection() имеют сложную логику работы (сложнее, чем просто цикл for), это не так просто, как может показаться на первый взгляд.

Я планирую заняться этой задачей в будущем. Когда нибудь.

6
  • Так-то value это вполне себе массив получается, и repeat ничего про генераторы не знает
    – Grundy
    6 июл 2017 в 14:15
  • @Grundy я на английском стеке ответ нашел и перевел. Пока курить сходил, понял, что все не так просто и имеет смысл разбираться дальше
    – rjhdby
    6 июл 2017 в 14:24
  • 1
    Если перевод - добавь ссылку на оригинал
    – Grundy
    6 июл 2017 в 14:31
  • первоисточник нашел. все печально
    – rjhdby
    6 июл 2017 в 14:54
  • Добавил ответ, в простых случаях вполне можно выкрутиться, но даже во вложенном ng-repeat уже начинаются сложности
    – Grundy
    6 июл 2017 в 15:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.