plusMinus function

by Amanda Williamson

HTML

<div ng-app="myApp" ng-controller="Ctrl as vm">
    <button ng-click="vm.plusMinus(vm.width - 1)"> - </button>
    <input ng-model="vm.width" />
    <button ng-click="vm.plusMinus(vm.width + 1)"> + </button>
</div>

<directive model-value="vm.width"
     model-option="line"
     ctrl-add-event="plusMinus(vm.width + 1)"
     ctrl-subtract-event="plusMinus(vm.width - 1)"></directive>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('directive', directive);


function Ctrl() {
    var vm = this;

    vm.testing = 'hello world';
    
    vm.width = 1;
    vm.plusMinus = plusMinus;
    
    function plusMinus(val, option) {
        vm.width = Math.min(5, Math.max(1, val));
    }
}

function directive() {
   return {
            restrict: 'E',
            replace: 'true',
            scope: {
                'modelValue': '=',
                'modelOption': '=',
                'ctrlAddEvent': '=',
                'ctrlSubtractEvent': '='
            },
            template: '<input ng-model="vm.testing" />',
            controller: function Ctrl() {
                var vm = this;
            
                vm.testing = 'hello world';
                
                vm.width = 1;
                vm.plusMinus = plusMinus;
                
                function plusMinus(val, option) {
                    vm.width = Math.min(5, Math.max(1, val));
                }
            },
            controllerAs: 'vm'
        };     
}
//'<div class="number-incrementer">' + 
//                       '<div class="number-incrementer-btn" ng-click="vm.plusMinus(modelValue, modelOption)">' +
//                       '-</div>' +
//                       '<input class="number-incrementer-input" type="text" maxlength="1" ' + 
//                               'ng-model="modelValue" ng-change="vm.inputSpinnerChange(modelValue, modelOption);">' +
//                       '<div class="number-incrementer-btn" ng-click="vm.plusMinus(modelValue, modelOption)">' + 
//                       '+</div>'+
//                       '</div>'