$counterSelector

gistfile1.txt

(function(){
	'use strict';

	angular
	.module('adutils.ui')
  .directive('counterSelector', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div><div class=row><button class="button button-outline col-20 f50 secondary ion-minus-circled"ng-click=sub()></button><div class=col><div style=font-size:74px;padding:10px;font-weight:bolder>{{valLabel}}</div></div><button class="button button-outline col-20 f50 secondary ion-plus-circled"ng-click=plus()></button></div><h4 class="onb-subtitle tcenter">years of experience</h4></div>',
    scope: {
      model: '='
    },
    link: function(scope, element, attrs) {
      
      scope.plus = plus;
      scope.sub = sub;
      scope.isCap = isCap;

      init();

      function init(){
        scope.min = Math.round( attrs.$attr.min ) || 0;
        scope.max = Math.round( attrs.$attr.max ) || 10;
        scope.capLabel = '10+';
        scope.val = scope.valLabel = scope.min;
        console.log(scope);
      }

      function plus(){
        console.log("plus ", scope.val);
        if(!isCap()) scope.valLabel = ++scope.val;
        else {
          scope.val = 11;
          scope.valLabel = scope.capLabel;
        }
        syncModel();
      }

      function syncModel(){
        scope.model = scope.val;
      }

      function sub(){
        if(scope.val > 0) scope.valLabel = --scope.val;
        syncModel();
      }

      function isCap(){
        return scope.val >= scope.max;
      }
    }
  };
});

})();