“观察者反应函数不应改变模型"是什么意思?使用嵌套的 ng-repeat? [英] What means "Observer reaction functions should not change model" using a nested ng-repeat?
问题描述
这是代码的简化版本，即使生成的 HTML 看起来不错，我也会在其中记录错误.这个异常是什么意思?为什么我会得到它?
index.html :
<div ng-app main><div ng-repeat="a in ctrl.listOfA"><strong>{{ a }}</strong><div ng-repeat="b in ctrl.listOfB(a)">{{ b }}<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(选择器:'[main]'，publishAs:'ctrl')类主控制器{final listOfA = new List.generate(2, (i) => 'a$i');listOfB(a) =>new List.generate(2, (i) => 'b$i').map((e) => '$a-$e');}无效主(){ngBootstrap(模块:新模块()..type(主控制器));}记录的错误:
观察者反应函数不应改变模型.检测到这些监视更改: ctrl.listOfB(a): (a0-b0, a0-b1) <= (a0-b0, a0-b1);ctrl.listOfB(a): (a1-b0, a1-b1) <= (a1-b0, a1-b1)检测到这些观察变化:堆栈跟踪:#0 RootScope.flush.<匿名闭包>(包: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 应用(包: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 (包: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 (包:angular/core/zone.dart:148:35)#15 ngBootstrap (包:angular/bootstrap.dart:92:18)#16 main (http://127.0.0.1:3030/xxxx/web/test/main.dart:13:14)Angular 仅支持表达式中的纯函数.我猜这是从 0.9.10 开始的，因为最近已经有一个类似的问题，它在更新后停止工作.
ctrl.listOfB(a)对于相同的参数应该总是返回相同的结果，
或者即使结果相同，原因也可能是 ctrl.listOfB(a) 总是返回相同结果的新实例.Angular 0.9.10 也不喜欢这个.
它重复计算表达式，并在每次抛出时是否收到新结果.
我认为解决方案是缓存结果并在可用时从缓存中返回.
Here's a simplified version of the code where I get an error that is logged even if the generated HTML looks good. What does this exception means ? Why do I get it ?
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)
);
}
The logged error :
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)
Angular only supports pure functions in expressions. I guess this started with 0.9.10 because there already was a similar question recently where it stopped working after the update.
ctrl.listOfB(a)
should always return the same result for the same argument,
or even if the result is the same, the cause could be that ctrl.listOfB(a) always returns a new instance of the same result. Angular 0.9.10 doesn't like this either.
It repeatedly evaluates the expression and if it receives a new result each time it throws.
I think the solution is to cache the results and return from the cache if already available.
这篇关于“观察者反应函数不应改变模型"是什么意思?使用嵌套的 ng-repeat?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
