没有更新的角度离子徽章计数 [英] Angular ionic badge count not updating

问题描述

我新的角度，相信我没有完全理解的消化周期。
我想以更新离子标签徽章计数。（使用离子）

离子标签

 ＆LT;离子分页标题=请求徽章=data.badgeNG控制器=RequestTabCtrl徽章式=徽章主见图标客=离子拉请求图标上=离子拉请求的href =＃/标签/请求＆GT;
＆LT;离子导航视图名称=选项卡，请求＆GT;＆LT; /离子NAV-视图＆gt;
 

我写了一个工厂，将存储和阵列。此数组是通过socket.io更新

通知工厂

\r

\r

.factory（'通知'，函数（）{\r
  VAR名单= [];\r
  返回{\r
    所有：功能（）{\r
      返回列表;\r
    }，\r
    补充：功能（数据）{\r
      list.push（数据）;\r
    }，\r
    长度：功能（）{\r
        返回List.length的数字;\r
    }\r
  };\r
}）;

\r

\r

\r

  .controller（'RequestTabCtrl'，函数（$范围，通知）{
  $ scope.data = {
    徽章：notifications.length（）
    };
}）;
 

我的问题是，当通知阵列通过socket.io更新徽章计数不更新。我已检查该阵列正在更新。其实我可以控制台登录数组的长度，并能看到它，它的变化。我也有设置在离子标签的孩子IO-导航视图，因此可以看到前pression {{requests.length}}可以在此视图更新范围的变量。

  .controller（'RequestsCtrl'，函数（$范围，通知）{
  $ scope.requests = notifications.all（）;
}）
 

我曾尝试观看$（在RequestTabCtrl）上notifications.length。我曾尝试调用$申请（在RequestTabCtrl），这已经导致了$消化正在进行中。我曾尝试$超时，看无阳性结果（RequestTabCtrl，工厂长功能）。将帮助我很多AP preciated。

解决方案

由于AjinderSingh，该解决方案被发现。

所以两种方式来进行此事。首先使用$区间的方法：

  .controller（'RequestTabCtrl'，函数（$范围，通知，$间隔）{
    $间隔（函数（）{
       $ scope.data = {
           徽章：notifications.length（）
        };
    }，2000）;
}）;
 

第二种方法是$从工厂广播后的项目已被添加到阵列。随后在追赶控制器此事件：

  .factory（'通知'，函数（$ rootScope）{
  VAR名单= [];
  返回{
    所有：功能（）{
      返回列表;
    }，
    补充：功能（数据）{
      list.push（数据）;
      $ rootScope $广播（'更新'）。
    }，
    长度：功能（）{
        返回List.length的数字;
    }
  };
}）;
.controller（'RequestTabCtrl'，函数（$范围，通知，$间隔）{
      $范围。在（'更新'$，函数（）{
           $ scope.data = {
              徽章：notifications.length（）
            };
       }）;
 }）;
 

我选择了第二种方法，因为它似乎是清洁的。

I am new to angular and believe i am not fully understanding the digest cycle. I am trying to update a badge count in a ion-tab.(using ionic)

"ion-tab"

<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>

I have written a factory that will store and array. this array is updated through socket.io

"notifications factory"

.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()
    };
});

My problem is that the badge count is not updating when the notifications array is updated through socket.io. I have checked that the array is being updated. In fact i can console log the array length and can see it it changing. Also i have set a scope variable in the ion-tab's child io-nav-view and as a result can see the expression {{requests.length}} be updated in this view.

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

I have tried $watch(in RequestTabCtrl) on notifications.length. i have tried calling $apply(in RequestTabCtrl) which results in a $digest already in progress. I have tried $timeout and see no positive result (in RequestTabCtrl and the factory length function). Help will me much appreciated.

解决方案

thanks to AjinderSingh, the solution was found.

So two ways to go about this. First using the $interval approach:

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

Second approach is to $broadcast from the factory after an item has been added to the array. followed by catching this event in the 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()
            };
       });
 });

I am choosing the second approach as it seems to be cleaner.

这篇关于没有更新的角度离子徽章计数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！