Удивительное сообщение об ошибке в Angular Dart, касающееся наблюдателей

Я пишу компонент, который берет строку и преобразует ее в список <span>. Каждому <span> присваивается символ String и назначается случайный цвет.

Вызов компонента выглядит так:

<span ng-repeat="char in ctrl.chars" style="color: {{ctrl.randomColor}};">
  {{char}}
</span>

И определение компонента выглядит так:

import 'package:angular/angular.dart';
import 'dart:math';

@NgComponent(
    selector: 'tokens',
    templateUrl: './component.html',
    cssUrl: './component.css',
    publishAs: 'ctrl',
    map: const {
      'text' : '@text',
    }
)
class TokensComponent {
  String text;

  List<String> get chars =>  text.split('');

  String get randomColor {
    var colors = ['red', 'green', 'yellow', 'blue'];
    return colors[new Random().nextInt(colors.length)];
  }
}

Это работает, но выдает ошибку:

5 $digest() iterations reached. Aborting!
Watchers fired in the last 3 iterations:
...

Мне не ясно, что именно здесь наблюдают, кроме геттера, которого я определяю. Если я оставлю код, включающий Random в геттере, а просто верну жестко закодированную строку, сообщение об ошибке исчезнет.

Есть идеи, что здесь не так?


dart angularjs angular-dart
person Shailen Tuli    schedule 11.01.2014    source источник
comment
Матиас Ниемела добавил комментарии к коду, поясняющие, что приводит к этой ошибке. $digest продолжает вызывать наблюдателей до тех пор, пока не будут распознаны дальнейшие изменения (scope.dart строка 456.   -  person Günter Zöchbauer    schedule 23.01.2014

Ответы (2)


arrow_upward
2
arrow_downward

Связывание метода-получателя со случайным возвращаемым значением похоже на вызов всевозможных странных вещей.

Из того, что я вижу, ваше намерение, похоже, состоит в том, чтобы показать все символы строки другим, случайным цветом, но не меняя цвета (это означает, что символы не должны постоянно менять свой цвет) - это правильно?

К сожалению, <span> не просто создается с текущим возвращаемым значением randomColor, а затем забывается — привязка свойства имеет то преимущество, что изменения в свойстве отражаются в представлении. Конечно, поскольку «свойство» является геттером и имеет случайное возвращаемое значение, оно постоянно изменяется, что приводит к постоянным обновлениям представления.

Если бы эта ошибка не возникала, чтобы предотвратить этот бесконечный цикл, все символы, вероятно, имели бы одинаковый (быстро меняющийся) цвет.

person MarioP    schedule 11.01.2014

arrow_upward
1
arrow_downward

EDIT
У этого вопроса есть хороший ответ на проблему: метод call() пользовательского фильтра AngularDart должен быть идемпотентным ?

И альтернативный подход:

ОРИГИНАЛ
Я не знаю, чего вы пытаетесь достичь, но, возможно, это все равно поможет

Скриншот результата:

Снимок экрана

library main;

import 'dart:math';
import 'package:angular/angular.dart';
import 'package:di/di.dart';


class MyAppModule extends Module {
  MyAppModule() {
    type(TokensComponent);
  }
}

void main() {
  ngBootstrap(module: new MyAppModule());
}


@NgComponent(
    selector: 'tokens',
    template: '''<span ng-repeat="item in ctrl.items" style="color: {{item.color}};">
  {{item.char}}
</span>''',
    //cssUrl: './component.css',
    publishAs: 'ctrl',
    map: const {
      'text' : '@text',
    }
)
class TokensComponent {
  String text = 'abcdefg';

  List<Item> items = new List<Item>();
  TokensComponent() {
    text.split('').forEach((e) => items.add(new Item(e, randomColor)));
  }

  var colors = \['red', 'green', 'yellow', 'blue'\];

  String get randomColor {
    return colors\[new Random().nextInt(colors.length)\];
  }
}

class Item {
  Item(this.char, this.color);
  String char;
  String color;
}
person Günter Zöchbauer    schedule 11.01.2014