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

时间:2014-08-18 22:26:34

标签: dart angular-dart

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

<!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>

过滤器&#39; enum&#39;使用加载使用XHR的数据。因此,在页面加载时,数据可用(例如,它需要一秒钟)。因此,虽然数据不存在,但过滤器返回null。当收到数据并且过滤器能够返回有意义的值时,如何触发控制器重新评估模板?

在下面的示例中,我使用Timer来模拟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 - &#34; One&#34;没有显示在页面上。如果我设置DELAY = false - 一切正常(应该如此)。当XHR(计时器)完成时,如何强制页面刷新/重新渲染?

1 个答案:

答案 0 :(得分:3)

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

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

由于格式化的表达式:1没有改变,我们不会重新运行格式化程序,因为我们假设它会给出相同的值。

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