Question

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

我在＆＃39; app.js＆＃39;中设置了数字0。

我做了减号按钮，加上按钮和文本框。

文本框中有一个数字。

如果我选中减号或加号按钮，则数字会改变。

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

但徽章中的号码没有改变。

这是我更改号码的代码。

＆＃13;

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++;
    }
  });

}]);

＆＃13;

<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>

＆＃13;

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

请帮助我。

Answer 1

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

考虑到你的方法，最简单的解决方案是使用$ rootScope而不是$ scope ，所以你在$ rootScope上监听和发出，两个EventControllers都会注意到这些变化。

我更喜欢的另一种清洁方法是将count和countBadge 置于服务（即单身）中，并创建一个监视器，以确保当一个控制器更新计数器时，另一个获取更新的值。

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

＆＃13;

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++;
    }
  });

}]);

＆＃13;

<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>

＆＃13;

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

1 个答案: