ionic购物加减指令

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中了。