gpt4 book ai didi

dart - AngularDart:如何在AngularJS中强制类似于$ digest的页面重新渲染?

转载 作者:行者123 更新时间:2023-12-03 03:18:50 25 4
gpt4 key购买 nike

我有一个包含简单组件的页面:

<!DOCTYPE html>
<html ng-app>
<head>
<title>Test</title>
</head>
<body index-page>

<div>
<h1>Status</h1>
<h2>{{ 1 | enum }}</h2>
</div>

<script type="text/javascript" src="packages/web_components/platform.js"></script>
<script type="text/javascript" src="packages/web_components/dart_support.js"></script>
<script type="application/dart" src="index.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>

过滤器“枚举”使用加载使用XHR的数据。因此,在页面加载时,数据可用(例如,需要一秒钟)。因此,当数据不存在时,过滤器将返回null。当接收到数据并且过滤器能够返回有意义的值时,如何触发 Controller 重新评估模板?

在下面的示例中,我使用计时器来模拟XHR:

import 'dart:html';
import 'dart:convert';
import 'dart:async';
import 'package:angular/application_factory.dart';
import 'package:angular/angular.dart';


@Controller(selector: '[index-page]', publishAs: 'ctrl')
class IndexPageController {

}

const DELAY = true;

@Formatter(name: 'enum')
class EnumNameFormatter {
Map names = new Map();

EnumNameFormatter() {
if (DELAY) {
new Timer(new Duration(milliseconds:2000), fillNames);
} else {
fillNames();
}
}

void fillNames() {
names[1] = "One";
names[2] = "Two";
names[3] = "Three";
}

String call(enumValue) {
var enumName = names[enumValue];
if (enumName != null) {
return enumName;
}
}
}

class MyAppModule extends Module {
MyAppModule() {
// needed for https://github.com/angular/angular.dart/issues/1272
// this will be fixed in 14.0
Binding.printInjectWarning = false;

// Main controller
bind(IndexPageController);

// Formatter
bind(EnumNameFormatter);

}
}

void main() {
applicationFactory().addModule(new MyAppModule()).run();
}

在下面的示例中,如果我设置DELAY = true-页面上不显示“One”。如果我设置DELAY = false-一切正常(应该这样做)。 XHR(计时器)完成后,如何强制页面刷新/重新呈现?

最佳答案

在AngularDart中,您不再需要使用$ apply或$ digest重新呈现页面。进行任何操作后,我们都会使用Dart Zones自动对您的模型进行脏检查。

您所看到的是一个不同的错误/功能-@Formatters是幂等的。也就是说,我们假设如果已经格式化一次值,则再次格式化将产生相同的结果。

由于正在格式化的表达式:1没有更改,因此我们不重新运行格式化程序,因为我们假设它会提供相同的值。

一个简单的解决方法是使用函数而不是格式化程序。

关于dart - AngularDart:如何在AngularJS中强制类似于$ digest的页面重新渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25373010/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com