Question

我有一个使用@NgController的应用程序和工作用例，其中UI操作触发模型中的更改，立即反映在视图中。该模型由一系列对象组成。

什么不起作用是当触发的动作开始某个异步过程时，最终修改模型（在列表中添加新元素）。视图没有更新。

我想这是按设计工作的，我错过了一些东西。在这种情况下我应该使用什么模式？

更新：此处显示问题的最小代码段：

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Angular bug test</title>
    <link rel="stylesheet" href="angular_bug_test.css">
    <script src="http://lounge-server.jit.su/socket.io/socket.io.js"></script>
  </head>
  <body test>
    <h1>Angular bug test</h1>

    <p>The number of element in the list is {{controller.list.length}}</p>
    <input ng-click="controller.addElementSync()" type="button" value="Add Sync"></input>
    <input ng-click="controller.addElementAsync()" type="button" value="Add Async"></input>
    <input ng-click="controller.addElementJsAsync()" type="button" value="Add JS Async"></input>
    <ul>
      <li ng-repeat="element in controller.list">{{element}}</li>
    </ul>

    <script type="application/dart" src="angular_bug_test.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

和相应的飞镖码：

@NgController(selector: '[test]', publishAs: 'controller')
class TestController {

  List<String> list = new List<String>();

  void addElementSync() {
    list.add("${list.length}. element");
  }

  void addElementAsync() {
    new Timer(new Duration(seconds: 1), () => list.add("${list.length}. element"));
  }

  void addElementJsAsync() {
    context['io']
      .callMethod('connect', ['http://lounge-server.jit.su:80/'])
      .callMethod('on', ['connect', _onConnect]);
  }

  void _onConnect() {
    Logger.root.fine('connected');
    list.add("${list.length}. connected");
    Logger.root.fine('list.length = ${list.length}');
  }

}

当触发Add JS Async按钮时，控制台会显示以下内容：

FINE : connected
FINE : list.length = 6

不幸的是，ng-repeat和{{controller.list.length}}都没有得到更新。

更新：以下解决方法在JS互操作中解决了这个问题（赞扬詹姆斯）


  NgZone _zone;

  TestController(NgZone this._zone);


  void addElementJsAsync2() {
    context['io']
      .callMethod('connect', ['http://lounge-server.jit.su:80/'])
      .callMethod('on', ['connect', _zone.run(_onConnect)]);
  }

更新：错误仍然存在于0.11.0中，NgZone已重命名为VmTurnZone

Answer 1

您所描述的内容应该是开箱即用的。唯一棘手的部分是处理列表：为了检测列表中的更改，自定义指令必须使用Scope.$watchCollection来查看集合。普通手表和属性地图将错过列表中的更改。

处理列表的内置指令（例如ng-repeat）已使用$watchCollection。

在angular-dart中是否有一种方法可以明确地通知修改后的模型的视图？

1 个答案: