阵列推送不适用于实时

Question

我正在使用 Pusher for Angular Webapp 进行实时应用程序。当其他会话中的其他人从表单中添加项目时，我需要向数组产品中添加一个新项目。在我的会话中它是有效的。在另一个会话中，如果将数据添加到数组但未显示在 ng-repeat 中，则获取数据。

控制器：

.controller('MainCtrl', ['$scope','Products',function($scope,Products) {
    $scope.products = Products.getAll();
    var pusher = new Pusher('MY KEY', {
      encrypted: true
    });

    $scope.addProduct = function(product){
        Products.addProduct(product);
    }

    var callback = function(data) {
        $scope.products.push(data.NewProduct);
        console.log($scope.products);
    };

    var channel = pusher.subscribe('products');
    channel.bind('addProduct', callback);
}]);

查看：

<tbody>
        <tr ng-repeat="product in products track by product.id">
          <td >{{product.name}}</td>
          <td>{{product.unity}}</td>
          <td>{{product.price}}</td>
          <td>
            <button>
              Edit
            </button>
            <button>
              Delete
            </button>
            </td>
        </tr>
      </tbody>

Answer 1

$evalAsync 稍后在当前范围内执行表达式。

所以在你的代码中添加 $evalAsync 到回调函数

.controller('MainCtrl', ['$scope','$evalAsync','Products',function($scope,$evalAsync, Products) {
    $scope.products = Products.getAll();
    var pusher = new Pusher('MY KEY', {
      encrypted: true
    });

    $scope.addProduct = function(product){
        Products.addProduct(product);
    }

    var callback = function(data) {
        $scope.products.push(data.NewProduct);
        console.log($scope.products);
    };

    var channel = pusher.subscribe('products');
    channel.bind('addProduct', $evalAsync(callback));
}]);

Answer 2

我是这样做的：

var callback = function(data) {
            $scope.$apply(function(){
                $scope.products.push(data.Producto);
            });
            console.log($scope.products);
        };