Question

我正在尝试使用AngularJS和套接字服务器构建实时应用程序。我试着跟随John Papas Angular Styleguide

我有一个名为mainFactory的工厂：

...
socket.on('buylist', function(list) {
            buylist = list;
            $rootScope.$broadcast('buylist');
        });
...
mainFactory.getBuylist = function () {
            return buylist;
        }

对于Controller我使用ControllerAs语法，因此我构建了一个View Model变量。 HomeController中：

var vm = this;

$scope.$on('buylist', function(e) {
    vm.buylist = mainFactory.getBuylist();
    console.log('TO TEST WHEN THE EVENT IS FIRED!')
});

在视图中：

<li ng-repeat="listitem in home.buylist">
...
</li>

这可以很好地但视图在事件被触发后2-5秒更新。但我希望视图能够立即更新。

我通过在事件中使用$ scope而不是vm和$ apply（）来实现这一点：

$scope.$on('buylist', function(e) {
    $scope.buylist = mainFactory.getBuylist();
    $scope.$apply();
});

在视图中：

<li ng-repeat="listitem in buylist">
...
</li>

所有内容现在完全实时但样式指南说我应该尽量避免使用$ scope，而是使用ViewModel ControllerAs方式。所以我正在寻找的是一种方法来应用ViewModel或其他方式在事件被触发后立即更新视图。

Answer 1

问题是来自套接字的事件根本不知道AngularJS。只有在digest cycle期间对模型进行更改时，Angular才会更新视图。如果您在其外部更改模型，您的更改将反映在出于任何原因发生的下一个摘要中。

在大多数情况下，如果你留在Angular＆＃34;中，你就不需要知道这一点。所有时间（例如，当您使用ng-click处理点击事件时，将自动为您启动摘要周期。）

但是，当你想要处理非Angular事件（即套接字事件或jQuery事件等）时，你必须关心它以使一切正常。为了使其最透明，我将您的套接字侦听器更改为：

socket.on('buylist', function(list) {
    $rootScope.$apply(function() {
        buylist = list;
        $rootScope.$broadcast('buylist');
    });
});

您可能需要read more on this topic并查看this similar problem。

在事件上更新/应用ViewModel

1 个答案: