AngularJS dynamically change ngMask

Question

I need to dynamically change a mask.

So I'm making this directive to handle it:

link: function($scope, $element, $attrs, ngModel) {
    $scope.$watch($attrs.ngModel, function(value) {
        if (value.length > 4) {
            $element.attr('mask', '9999  9999');
        } 
        else {
            $element.attr('mask', '99999999');
        }
    });
}

The mask is being applied, I'm checking the DOM, but there's no effect whatsoever.

What I am missing here?

Answer 1

Can you do that logic in the dom instead of the link? Modyfing the attr probably won't do anything as it's already been parsed and it might not be watching it.

ng-model="maskModel" mask="{{ maskModel.length > 4 ? '9999  9999' : '99999999' }}"

Answer 2

I know this isn't what you are asking but it may help others coming here. A good alternative is to define an optional character. To do that just add an '?' after the character you want to be optional:

mask="9?9999-9999"

This is great for inputs like Brazilian phone numbers, which can have both 8 or 9 characters.

Answer 3

使用attrs.$observe(..)而不是$scope.$watch (..) 。