No luck trying to update badge on a tab, scoping issue?

ionic-v1
#1

Ok i’m fairly new to angular and spent the last 3 hours on this issue.

I have an ionic tabs app and I want to update the badge on the notifications tab whenever something happens, I gotta think it’s a scoping issue but i’m confused

I went through this other post and am basically doing whats proposed in the answer http://stackoverflow.com/questions/32470828/angular-ionic-badge-count-not-updating

I have a controller which controls the notifications tab data (TabsCtrl). When I use the interval to update the badge the correct value shows up on the badge. But when I use a message service which broadcasts the message I am unable to update the badge.

Here’s the weird thing: I can literally log to console and the updated badge count is there in TabsCtrl but when I set $scope.User the badge is not getting updated. If I click on the notifications tab, then badge then gets updated.

In TabsCtrl I listen for the message and receive it. At this time I update the $scope.User = User but I get no update on badge. I can print User.notificationsCount and the right value shows on console.

Also, when I use the interval (commented out) it works just fine.

What am I missing??

Tabs.html

  <!-- Dashboard Tab -->
  <ion-tab title="Activities" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/activities">
    <ion-nav-view name="tab-activities"></ion-nav-view>
  </ion-tab>

  <!-- Notifications Tab -->
  <ion-tab title="Notifications" ng-controller="TabsCtrl" badge="User.notificationsCount" badge-style="badge-assertive" icon-off="ion-android-notifications-none" icon-on="ion-android-notifications" href="#/tab/notifications">
    <ion-nav-view name="tab-notifications"></ion-nav-view>
  </ion-tab>

  <!-- Settings Tab -->
  <ion-tab title="Account" icon-off="ion-ios-cog-outline" icon-on="ion-ios-cog" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>

</ion-tabs>

TabsCtrl looks like this (notice I have both interval in there which has been commented out).

angular.module('controllers').controller 'TabsCtrl', ($scope, $stateParams, User, Settings, $interval)->
  initialize = ()->
    $scope.$on "notification:received", (err,data)->
      console.log "nofication"
      $scope.User = User
    ###$interval ()->
      $scope.User = User
    , 1000###
    $scope.User = User

  initialize()
  return

How I setup my app

$stateProvider
    .state 'tab',
      url: '/tab'
      abstract: true
      controller: "MainCtrl"
      templateUrl: 'templates/tabs.html'
      resolve:
        populateSession : ($state, User)->
          return User.populateSession()
    .state 'tab.activities',
      url: '/activities'
      views: 'tab-activities':
        templateUrl: 'templates/tab-activities.html'
        controller: 'ActivitiesCtrl'
    .state 'tab.notifications',
      url: '/notifications'
      views: 'tab-notifications':
        templateUrl: 'templates/tab-notifications.html'
        controller: 'NotificationsCtrl'
    .state 'tab.account',
      url: '/account'
      views: 'tab-account':
        templateUrl: 'templates/tab-account.html'
        controller: 'AccountCtrl'
  # if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise '/tab/activities'
  return
1 Like
Can badges on tabs be dynamically updated?
#2

Have you figured this out?

#3

I think you are not updating the $scope.User properly when notification:received event is fired. Try printing new User object , if its being updated or not. If yes try

$scope.$apply(function() {
$scope.User = User
})

1 Like
#4

Thanks Saurabh. That is what I ended up doing after a reply on another thread in stackoverflow

angular.module('controllers').controller 'NotificationsCtrl', ($scope, Notification)->
  console.log "NotificationsCtrl"
  $scope.$on "notification:received", (err,data)->
     $scope.$apply()
     $scope.Notification = Notification
  return
1 Like
#5

@veerM check my reply