Angular JS 和 Web 套接字

Question

我正在尝试让 Angular JS 与 Web 套接字一起工作，在从 Github 上的 Angular Web 套接字种子进行基本设置后，我仍然面临双向数据绑定的小问题。我正在使用配置文件之类的文件来设置初始应用程序值，其中包含以下内容：

  socket.emit('button:state', {
    state: 'default'
  });

然后我有一个控制器，最初处理按钮的状态，然后尝试通过网络套接字重写初始状态：

function MyCtrl1($scope, socket) {

    // UI INITIAL STATE
    socket.on('button:state', function (data) {
        $scope.buttonState = data.state;
    });

    // UI CLICKED STATE
    $scope.buttonClicked = function(data) {
        //$scope.buttonState = 'clicked';
        socket.emit('button:state', {
            state: 'clicked'
        });
        console.log('button clicked');
    };
}
MyCtrl1.$inject = ['$scope', 'socket'];

视图是在 Jade 中简单设置的：

div(class='button', ng-class='buttonState', ng-click='buttonClicked()')

请问有谁能解释一下吗？

Answer 1

你不在 Angular 的 RunLoop 中。尝试在从套接字接收时更改buttonState 后添加$scope.$apply();。