javascript - Angular $scope $watch 服务函数返回值

Question

我有一个用于我的 websocket 连接的服务，这个服务在一个函数中返回实际状态，无论客户端是否实际连接。我已经简化了我的代码，这些片段是我的问题的一个小例子:

myApp.factory('Websocket', function() {
    //the status boolean whether connected or not
    var bool = true;

    //small mock for the status change
    setInterval(function() {
        bool = !bool;
    }, 1000);

    //i've made the value of the status variable accessable in a function or the variable itself
    return {
        status: function() {
            return bool;   
        },
        var: bool
    }
});

现在我尝试将状态值应用于 Controller 中的范围:

myApp.controller('Ctrl', function(Websocket, $scope) {
   //method 1
   $scope.status = Websocket.status();

   //method 2
   $scope.$watch(function() {
     return Websocket.status();
   }, function(newVal) {
     $scope.status = newVal;
   });
});

...但这两种方法都不起作用，也不会更新此 html 的 $scope 变量:

<div ng-app="myApp">
    <div ng-controller="Ctrl">
      method1: {{status}}
    </div>
</div>

这是一个代码笔:http://codepen.io/anon/pen/bVjaBa?editors=101

感谢您的帮助!

Answer 1

问题是 Angular 观察到的数据的任何“外部”更改都必须调用 scope.$apply() 来让观察者更新(这里的观察者是来自 的 UI {{status}} 表达式)。在 codepen 中，解决方案很简单:使服务依赖于 $rootScope 并在 interval 函数中调用 $rootScope.$apply():

myApp.factory('Websocket', function($rootScope) {
    ...
    setInterval(function() {
        bool = !bool;
        $rootScope.$apply();
    }, 1000);
    ...
});

实际服务必须做类似的事情，关键概念是:(1) 您必须调用 $apply() 和 (2) 无法访问特定范围，只需使用$rootScope。