How to create a directive in Angularjs that creates a mask and did not modify the ng-model?

Question

I created a directive where it serves as a mask for current account, so when I type a value always the most right value in the input is the digit of my account, until then beauty, is working. The problem is that I don’t want to change the value of my ng-model if I inform for example 123456 should appear in my view 12345-6 and in my ng-model should be only 123456 (without the dash). What is happening and that my ng-model is being changed (12345-6). Does anyone know how to solve this??

In my view is correct, the directive meets me

NOTE: In the lower left corner look at my ng-model

angular.module('app').directive('contaCorrenteMask', function () {
    return {
        restrict: 'A',
        require: "ngModel",
        link: function (scope, element, attrs, ctrl) {           

            var _formatContaBanco = function (data) {

                if (!data)
                    return data;

                if (data.length == 1)
                    return data;

                data = data.replace(/[^0-9]+/g, "");

                var digito = data.slice(-1);
                var conta = data.slice(0, -1);
              
                return conta + '-' + digito;
            };
           
            // Send out changes from inside: 
            scope.$watch(attrs.ngModel, function (val) {
                scope.model = val;
                ctrl.$setViewValue(_formatContaBanco(scope.model));
                ctrl.$render();
            });
        }
    };
})

Answer 1

So your problem is that you’re using the setViewValue.

ctrl.$setViewValue(_formatContaBanco(scope.model));

This causes ngModel to be updated as well, to have the viewValue and modelValue different you should use:

Format ngModel text for view

ngModel.$formatters.push(function(value) {
   return value.toUpperCase();
});

Format view text for ngModel

ngModel.$parsers.push(function(value) {
   return value.toLowerCase();
});

---

Now your code fixed

angular.module('app').directive('contaCorrenteMask', function () {
    return {
        restrict: 'A',
        require: "ngModel",
        link: function (scope, element, attrs, ctrl) {           

            var _formatContaBanco = function (data) {

                if (!data)
                    return data;

                if (data.length == 1)
                    return data;

                data = data.replace(/[^0-9]+/g, "");

                var digito = data.slice(-1);
                var conta = data.slice(0, -1);
          
                return conta + '-' + digito;
            };
       
            // Send out changes from inside: 
            ctrl.$formatters.push(function (modelValue) {
                return _formatContaBanco(modelValue);
            });
        }
    };
})