CODEWITHSUNDEEP
javascriptarraysangularjsionic-framework
miladino43
miladino43

Reputation: 11

Angular ionic badge count not updating

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.

Upvotes: 0

Views: 5722

Answers (2)

Kamal Kumar
Kamal Kumar

Reputation: 3763

$ionicPlatform.ready(function() {
    $cordovaBadge.promptForPermission();

    $scope.setBadge = function(value) {
        $cordovaBadge.hasPermission().then(function(result) {
            $cordovaBadge.set(value);
        }, function(error) {
            alert(error);
        });
    }
});

For complete reference plz check https://www.thepolyglotdeveloper.com/2015/07/modify-the-badge-number-of-an-ionic-framework-app/

Upvotes: 0

miladino43
miladino43

Reputation: 11

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.

Upvotes: 1

Related Questions