如何增加离子徽章中的数字

How to increase a number in badge on ionic

本文关键字：徽章 数字 何增加 增加      更新时间：2023-09-26

我想增加徽章中的一个数字。

我在"app.js"中设置了数字0。

我制作了减号按钮、加号按钮和文本框。

文本框中有一个数字。

如果我按下减号或加号按钮，数字就会改变。

我在按钮点击功能中添加了一个操作。

但徽章上的数字没有改变。

这是我更改号码的代码。

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>

如何修复我的代码，点击按钮更改徽章中的数字。

请帮帮我。

您的代码的问题是您实例化了几次EventController，因此每个实例的$作用域都不同（这就是为什么在存在按钮的$scope中计数器会更新，但在另一个EventController$作用域上它不会：它没有侦听相同的作用域事件）。

考虑到您的方法，最简单的解决方案是使用$rootScope而不是$scope，因此您在$rootScope上侦听和发射，并且两个EventControllers都会注意到更改。

另一种更干净的方法，我更喜欢将count和countBadge放入服务（即单例）中，并创建一个监视，以确保一个控制器更新计数器时，另一个控制器获得更新的值。

我在代码片段中附上了第一个解决方案，稍微清理一下代码以使其清晰：

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>

相关文章：