How to increase a number in badge on ionic

Question

I'd like to increase a number in a badge.

I set the number 0 in 'app.js'.

And I made minus button, plus button and textbox.

There is a number in the textbox.

If I tab the minus or plus button, the number would change.

I added an action in the button click function.

But the number in badge is not changed.

This is my code to change the number.

example.controller('EventController', ['$scope', function($scope) {
  $scope.count = 0;
  $scope.countBadge = 0;

  $scope.$on('orderMinus', function() {
    if($scope.count!=0){
        $scope.count--;
    }

    if($scope.countBadge != 0){
        $scope.countBadge--;
    }
  });

  $scope.$on('orderPlus', function() {
    if($scope.count<=29){
          $scope.count++;
          $scope.countBadge++;
    }
  });

}]);

<script id="page_dish.html" type="text/ng-template">
  <div>
    <ion-header-bar style="height:10%; background: none; border-bottom: none">
      <a id = "button_menuList" href="#/page_menuList"></a>
      <a id = "img_chopchop"></a>
      <div ng-controller="EventController">
      <span class="badge badge-assertive">{{countBadge}}</span>
      </div>
      <a id = "button_basket" href="#/page_join"></a>
    </ion-header-bar>
  </div>
  <ion-view class = "page_dish" ng-controller="AppCtrl">
    <ion-content class = "no-header no-footer" has-bouncing="false">
      <ion-slide-box>

        <ion-slide class = "episode1">

          <div align = "left">
            <img src="img/Episode/Main/Episode1/Text_title.png" style="width:80%; margin-left:5%; margin-top:25%;">
            <img src="img/Episode/Main/Episode1/Label_price.png" style="width:40%; margin-left:5%; margin-top:4%;">
          </div>
          <div>
            <a id = "button_learnMore1" ng-click="modal.show()"></a>
          </div>
          <div align = "left" ng-controller="EventController">
            <a class = "button_minus1" ng-click="$emit('orderMinus')"></a>
            <input type="text" style="position:absolute; width:95px; height:65px; margin-left:37.4%; font-size:55px; color:#ffffff; background-color:transparent; text-align:center;" value = {{count}} readonly = "true">
            <a class = "button_plus1" ng-click="$emit('orderPlus')"></a>
          </div>
        </ion-slide>
      </ion-slide-box>
    </ion-content>
  </ion-view>
</script>

How to fix my code to change the number in badge with click the button.

Please, help me.

Your header bar and content container are using 2 separate controller assignments. Both controllers have no knowledge of each other. You should either use 1 controller for both of them (on a common parent element), or use some way to communicate between both controller instances. — S.B., Dec 10 '15 at 15:42

score 0 · Accepted Answer · answered Dec 10 '15 at 15:47

The problem with your code is that you are instantiating several times EventController, so the $scope is different for each instance (that's the reason why in the $scope where the buttons exist the counter gets updated, but on the other EventController $scope it won't: it's not listening the same scope events).

Considering your approach, the easiest solution is to use $rootScope instead of $scope, so you listen and emit on $rootScope and both EventControllers notice the changes.

Another cleaner approach which I'd prefer is to put count and countBadge inside a service (that is a singleton), and create a watch to ensure that when counter is updated by one controller, the other one gets the updated value.

I attach the first solution in code snippet, cleaning a little bit the code to make it clear:

example.controller('EventController', ['$scope', '$rootScope', function($scope, $rootScope) {
  $scope.count = 0;
  $scope.countBadge = 0;

  $scope.emit = $rootScope.$emit;


  $rootScope.$on('orderMinus', function() {
    if($scope.count!=0){
        $scope.count--;
    }

    if($scope.countBadge != 0){
        $scope.countBadge--;
    }
  });

  $rootScope.$on('orderPlus', function() {
    if($scope.count<=29){
          $scope.count++;
          $scope.countBadge++;
    }
  });

}]);

<script id="page_dish.html" type="text/ng-template">

  <div>
    <ion-header-bar style="height:10%; background: none; border-bottom: none">
      <a id = "button_menuList" href="#/page_menuList"></a>
      <a id = "img_chopchop"></a>
      <div ng-controller="EventController">
      <span class="badge badge-assertive">{{countBadge}}</span>
      </div>
      <a id = "button_basket" href="#/page_join"></a>
    </ion-header-bar>
  </div>


  <ion-view class = "page_dish" ng-controller="AppCtrl">
    <ion-content class = "no-header no-footer" has-bouncing="false">
      
    <!--    some stuff    -->
          <div align = "left" ng-controller="EventController">
            <a class = "button_minus1" ng-click="emit('orderMinus')"></a>
    <!-- some more  stuff -->
            
            <a class = "button_plus1" ng-click="emit('orderPlus')"></a>
          
    <!-- some more  stuff -->

    </ion-content>
  </ion-view>
</script>

That's great !! It's working properly. Actually, I copied many lines of my code. So, I don't know what does $emit mean. What is the role of $emit? — TaeJoon Jeon, Dec 10 '15 at 16:13
Using $rootScope.$emit('message1') you are sending upwards the scope an event called "message1", than any subscriber will detect (you subscribe to that event with $rootScope.$on('message1') ). You can also use $rootScope.$broadcast('message1'), but in that case the event is delivered downwards the scope, so in terms of performance it's better to stay on the top level scope ($rootScope) and use $emit and subscribe ($on) there, preventing the event to go through multiple scopes. — Enrique Oriol, Dec 11 '15 at 08:53

How to increase a number in badge on ionic

1 Answers1