javascript - Angular ionic 徽章计数未更新

Question

我是 Angular 新手，相信我没有完全理解摘要周期。 我正在尝试更新 ion-tab 中的徽章计数。(使用 ionic)

“ ionic 标签”

<ion-tab title="Requests" badge="data.badge" ng-controller="RequestTabCtrl" badge-style="badge-assertive" icon-off="ion-pull-request" icon-on="ion-pull-request" href="#/tab/requests">
<ion-nav-view name="tab-requests"></ion-nav-view>

我编写了一个用于存储和数组的工厂。该数组通过socket.io更新

“通知工厂”

.factory('notifications',function(){
  var list = [];
  return{
    all: function(){
      return list;
    },
    add: function(data){
      list.push(data);
    },
    length: function(){
        return list.length;
    }
  };
});

.controller('RequestTabCtrl',function($scope,notifications){
  $scope.data = {
    badge : notifications.length()
    };
});

我的问题是，当通过 socket.io 更新通知数组时，徽章计数没有更新。我已经检查过该数组正在更新。事实上，我可以通过控制台记录数组长度并可以看到它的变化。此外，我还在 ion-tab 的子 io-nav-view 中设置了一个范围变量，因此可以看到表达式 {{requests.length}} 在此 View 中更新。

.controller('RequestsCtrl', function($scope,notifications) {
  $scope.requests = notifications.all();
})

我已经在notifications.length上尝试过$watch(在RequestTabCtrl中)。我尝试调用 $apply(in RequestTabCtrl) ，这会导致 $digest 已经在进行中。我尝试过 $timeout 并没有看到积极的结果(在 RequestTabCtrl 和工厂长度函数中)。我将非常感谢帮助。

Answer 1

感谢 AjinderSingh，找到了解决方案。

有两种方法可以解决这个问题。首先使用 $interval 方法:

.controller('RequestTabCtrl',function($scope,notifications,$interval){
    $interval(function(){
       $scope.data = {
           badge : notifications.length()
        };
    },2000);
});

第二种方法是在将项目添加到数组后从工厂进行 $broadcast 。然后在 Controller 中捕获此事件:

.factory('notifications',function($rootScope){
  var list = [];
  return{
    all: function(){
      return list;
    },
    add: function(data){
      list.push(data);
      $rootScope.$broadcast('update');
    },
    length: function(){
        return list.length;
    }
  };
});


.controller('RequestTabCtrl',function($scope,notifications,$interval){
      $scope.$on('update',function(){
           $scope.data = {
              badge : notifications.length()
            };
       });
 });

我选择第二种方法，因为它看起来更干净。