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

Question

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

我在 '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>

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

请帮帮我。

Answer 1

你的代码的问题是你实例化了好几次EventController，所以$scope对于每个实例都是不同的（这就是为什么在$scope中按钮存在，计数器会更新，但在另一个 EventController $scope 上它不会：它没有监听相同的范围事件）。

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

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

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

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>