Маска ввода кредитной карты при размытии

Я бы создал директиву атрибута для этого. Лучшей практикой Angular является управление DOM внутри директивы, а не контроллера.

В вашем случае, когда вы привязываете событие blur к элементу, вы должны сохранить текущее значение в переменную. Затем вы можете получить доступ к этой переменной при привязке события focus.

 angular.module('CreditApp', [])
     .directive('maskInput', function() {
         return {
             restrict: "A",
             link: function(scope, elem, attrs) {
                 elem.bind("blur", function() {
                     var number = elem.val();
                     elem.val(elem.val().slice(0,4) + elem.slice(4).replace(/\d/g, '*'));
                 });
                 elem.bind("focus", function() {
                     elem.val(number);
                });
             }
        }
  });

Я только что создал plunkr для этого

https://plnkr.co/edit/ZywTmF7xfz2FyvRULLjL?p=preview

Попробуйте ввести номер кредитной карты в поле ввода и щелкните за его пределами. Это событие blur, и номер кредитной карты будет замаскирован. Теперь снова щелкните внутри поля, и значение будет восстановлено.

Вы можете использовать атрибуты data-, чтобы сохранить его. Я знаю версию jQuery:

$(function () {
  $("#cCard").blur(function () {
    cCardNum = $(this).val();
    $(this).data("value", cCardNum);
    if (cCardNum.length > 4) {
      $(this).val(cCardNum.substr(0, 4) + "*".repeat(cCardNum.length - 4))
    }
  }).focus(function () {
    $(this).val($(this).data("value"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="cCard" />

Это полифилл для функции String.prototype.repeat:

if (!String.prototype.repeat) {
  String.prototype.repeat = function(count) {
    'use strict';
    if (this == null) {
      throw new TypeError('can\'t convert ' + this + ' to object');
    }
    var str = '' + this;
    count = +count;
    if (count != count) {
      count = 0;
    }
    if (count < 0) {
      throw new RangeError('repeat count must be non-negative');
    }
    if (count == Infinity) {
      throw new RangeError('repeat count must be less than infinity');
    }
    count = Math.floor(count);
    if (str.length == 0 || count == 0) {
      return '';
    }
    // Ensuring count is a 31-bit integer allows us to heavily optimize the
    // main part. But anyway, most current (August 2014) browsers can't handle
    // strings 1 << 28 chars or longer, so:
    if (str.length * count >= 1 << 28) {
      throw new RangeError('repeat count must not overflow maximum string size');
    }
    var rpt = '';
    for (;;) {
      if ((count & 1) == 1) {
        rpt += str;
      }
      count >>>= 1;
      if (count == 0) {
        break;
      }
      str += str;
    }
    return rpt;
  }
}

Найдите рабочий плункер для директивы angularjs для форматирования номера карты в xxxxxxxxxxxx3456 Fromat. Маскировка номера карты

angular.module('myApp', [])

   .directive('maskInput', function() {
    return {
            require: "ngModel",
            restrict: "AE",
            scope: {
                ngModel: '=',
             },
            link: function(scope, elem, attrs) {
                var orig = scope.ngModel;
                var edited = orig;
                scope.ngModel = edited.slice(4).replace(/\d/g, 'x') + edited.slice(-4);

                elem.bind("blur", function() {
                    var temp;
                    orig  = elem.val();
                    temp = elem.val();
                    elem.val(temp.slice(4).replace(/\d/g, 'x') + temp.slice(-4));
                });

                elem.bind("focus", function() {
                    elem.val(orig);
               });  
            }
       };
   })
  .controller('myCtrl', ['$scope', '$interval', function($scope, $interval) {
    $scope.creditCardNumber = "1234567890123456";
  }]);