什么意思"观察者反应函数不应该改变模型"使用嵌套的ng-repeat?

时间:2014-03-25 14:25:28

标签: dart angular-dart

这是代码的简化版本,即使生成的HTML看起来很好,我也会记录错误。这个例外是什么意思?我为什么要这样做?

index.html

<!DOCTYPE html>
<div ng-app main>
  <div ng-repeat="a in ctrl.listOfA">
    <strong>{{ a }}</strong>
    <div ng-repeat="b in ctrl.listOfB(a)">
      {{ b }}
    </div>
  </div>
</div>

<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>

main.dart

import 'package:angular/angular.dart';  /* 0.9.10 */

@NgController(selector: '[main]', publishAs: 'ctrl')
class MainController {
  final listOfA = new List.generate(2, (i) => 'a$i');
  listOfB(a) => new List.generate(2, (i) => 'b$i').map((e) => '$a-$e');
}

void main() {
  ngBootstrap(module: new Module()
    ..type(MainController)
  );
}

记录的错误:

Observer reaction functions should not change model. 
These watch changes were detected: ctrl.listOfB(a): (a0-b0, a0-b1) <= (a0-b0, a0-b1); ctrl.listOfB(a): (a1-b0, a1-b1) <= (a1-b0, a1-b1)
These observe changes were detected: 

STACKTRACE:
#0      RootScope.flush.<anonymous closure> (package:angular/core/scope.dart:554:11)
#1      RootScope.flush (package:angular/core/scope.dart:560:9)
#2      RootScope.flush (package:angular/core/scope.dart:561:7)
#3      RootScope.flush (package:angular/core/scope.dart:561:7)
#4      apply (package:angular/core/scope.dart:262:18)
#5      _rootRun (dart:async/zone.dart:710)
#6      _rootRun (dart:async/zone.dart:711)
#7      _rootRun (dart:async/zone.dart:711)
#8      _ZoneDelegate.run (dart:async/zone.dart:440)
#9      NgZone._finishTurn (package:angular/core/zone.dart:96:21)
#10     NgZone._onRunBase (package:angular/core/zone.dart:61:43)
#11     _onRun (package:angular/core/zone.dart:66:15)
#12     _ZoneDelegate.run (dart:async/zone.dart:440)
#13     _CustomizedZone.run (dart:async/zone.dart:650)
#14     NgZone.run (package:angular/core/zone.dart:148:35)
#15     ngBootstrap (package:angular/bootstrap.dart:92:18)
#16     main (http://127.0.0.1:3030/xxxx/web/test/main.dart:13:14)

1 个答案:

答案 0 :(得分:5)

Angular仅支持表达式中的纯函数。我想这是从0.9.10开始的,因为最近有一个类似的问题,它在更新后停止了工作。

ctrl.listOfB(a)

应该始终为同一个参数返回相同的结果,

或者即使结果相同,原因可能是ctrl.listOfB(a)总是返回相同结果的新实例。 Angular 0.9.10也不喜欢这样。

它会重复计算表达式,并且每次抛出时都会收到一个新结果。

我认为解决方案是缓存结果并从缓存返回(如果已经可用)。