Question

考虑这段代码

export class TestController {
    constructor() {
        this.socket = io();
        this.movies = {};
        this.socket.emit('getAllMovies', '');
        this.socket.on('allMovies', this.listMovies.bind(this));
    }

    listMovies(data){
        this.movies = JSON.parse(data);
        console.log(this.movies);
    }
}

并查看（使用controllerAs语法）

<div>
{{ctrl.movies}}
</div>

当我打开页面时，它会显示{}，然后显示来自websocket收入的数据（正确），绑定到this.movies，并且没有任何变化。看起来双向招标被打破了。任何人都知道为什么？

Answer 1

问题不在于ES / ES6，而在于角度变化检测机制不了解您的套接字以及它必须运行摘要循环这一事实。

看看这个tutorial。这里的Socket io包含了一个服务，该服务在每个套接字事件上手动调用$ apply。

app.factory('socket', function ($rootScope) {
  var socket = io.connect();
  return {
    on: function (eventName, callback) {
      socket.on(eventName, function () {  
        var args = arguments;
        //NB!
        $rootScope.$apply(function () {
          callback.apply(socket, args);
        });
      });
    }
  };
});

双向绑定在ES6中不起作用

1 个答案: