ionic购物加减指令

来源：互联网发布：flyme清除数据编辑：程序博客网时间：2024/06/10 15:02

app端做商城项目，在购物车或订单里面一般都会用到商品的增、减。这里封装这样的指令，利用angularjs的优势，可以使用复用，方便开发类似此类的加减。
购物加减指令
1 drAddSubtrat指令

/** * Created by dzm on 2016/5/28. * 数字增减指令 */directives.directive('drAddSubtrat', [function () {    return {        restrict:'AE',        scope:{drNumber:'=',minValue:'@',maxValue:'@',drChange:'&'},        replace:true,        templateUrl:'js/directive/tpl/tpl-add-subtract.html',        link:function(scope, element, atrrs){            // 减            scope.subtract = function(){                var quantity = parseInt(scope.drNumber) - 1;                if (!angular.isUndefined(scope.minValue) && quantity<scope.minValue){                    scope.drNumber = scope.minValue;                } else{                    scope.drNumber = quantity;                }                scope.drChange({value:scope.drNumber});            }            // 加            scope.add = function(){                var quantity = parseInt(scope.drNumber) + 1;                if (!angular.isUndefined(scope.maxValue) && quantity>scope.maxValue){                    scope.drNumber = scope.maxValue;                } else{                    scope.drNumber = quantity;                }                scope.drChange({value:scope.drNumber});            }        }    }}]);

2 tpl-add-subtract.html模板

<div class="row row-no-padding">    <div class="col col-25 text-center"><button class="button button-small button-clear min-plus" ng-click="subtract()">-</button></div>    <div class="col col-50 text-center"><input type="number" ng-keyup="validatei(this)" value="{{drNumber}}" class="text-center count-input" style="border-style:solid;padding: 0;"></div>    <div class="col col-25 text-center"><button class="button button-small button-clear min-plus" ng-click="add()" >+</button></div></div>

3 css

.min-plus{    font-size: 35px;    font-weight: 100;}.count-input{    width: 50px;    border-bottom: solid #e1e1e1 1px;    color:#999999;}

3 controller调用
主要实现drChange里面的动作，在指令中scope.drChange({value:scope.drNumber});这段代码可以将值传到你定义的controller中了。

0 0