我想增加徽章中的一个数字。
我在"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>