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

Question

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

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

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

文本框中有一个数字。

如果我点击减号或加号按钮，数字将会改变。

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

但是badge里面的数字没有变。

这是我更改号码的代码。

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>

如何修复我的代码以通过单击按钮更改徽章中的数字。

请帮帮我

Answer 1

您的代码的问题在于您要实例化多次 EventController，因此每个实例的 $scope 都不同（即为什么在按钮存在的 $scope 中计数器得到更新，但在另一个 EventController $scope 中它不会更新的原因：它没有监听相同的范围事件).

考虑到您的方法，最简单的解决方案是使用 $rootScope 而不是 $scope，这样您就可以在 $rootScope 上监听和发出，并且两个 EventController 都会注意到更改。

我更喜欢的另一种更简洁的方法是将count和countBadge放入service（即单例），并创建一个手表以确保当一个控制器更新计数器时，另一个控制器获得更新后的值。

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

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>

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

How to increase a number in badge on ionic

javascript

ionic

badge