Chỉ thị $ formatters ảnh hưởng đến ngModel khi viết

Question

Tôi gặp vấn đề khi sử dụng $ formatters.

Mục tiêu của tôi là ẩn số điện thoại, chỉ để lại 4 ký tự cuối cùng hiển thị. Không sao nếu bạn không viết bất cứ điều gì trong đầu vào. Nếu bạn viết một cái gì đó, mô hình được ảnh hưởng bởi mặt nạ và tôi đăng ký điện thoại ẩn trong DB ...

Dưới đây là chỉ thị tôi sử dụng:

.directive('tsHideField', function() { 
return { 
    require: 'ngModel', 
    restrict: 'A', 
    link: function (scope, element, attributes, controller) { 

     var maskValue = function (value) { 
      if (!value) { 
       return ""; 
      } 
      if (value.length <= 4) { 
       return value; 
      } 
      var valueHide = ""; 
      if (value.indexOf('@') === -1) { 
       //leave last 4 chars 
       valueHide = value.toString().substring(0, value.length - 4).replace(/[\S]/g, "\u2022"); 
       return valueHide + value.toString().substring(value.length - 4); 
      } else { 
       //Adresse email, on laisse après le @ et on cache tout sauf les 4 dernières lettre avant 
       //'lambertjer@gmail.com'.substring(0,'lambertjer@gmail.com'.indexOf('@') - 4).replace(/[\S]/g, "\u2022") + 'lambertjer@gmail.com'.substring('lambertjer@gmail.com'.indexOf('@') - 4) 
       valueHide = value.toString().substring(0, value.indexOf('@') - 4).replace(/[\S]/g, "\u2022"); 
       return valueHide + value.toString().substring(value.indexOf('@') - 4); 
      } 

      // replace all characters with the mask character 
      //return (value || "").replace(/[\S]/g, "\u2022"); 
     } 

     /** SI ON VEUT EGALEMENT CACHER A L ECRIT: 
     * 
     * var createMaskedInputElement = function() { 
      if (! maskedInputElement || ! maskedInputElement.length) { 
       maskedInputElement = element.clone(true); 
       maskedInputElement.attr("type", "password"); // ensure the value is masked 
       maskedInputElement.removeAttr("name"); // ensure the password save prompt won't show 
       maskedInputElement.removeAttr("core.application.main.directive.mask"); // ensure an infinite loop of clones isn't created 
       maskedInputElement.bind("blur", function() { 
        element.removeClass("ng-hide"); 
        maskedInputElement.remove(); 
        maskedInputElement = null; 
       }); 
       $compile(maskedInputElement)(scope); 
       element.after(maskedInputElement); 
      } 
     }; 

     element.bind("focus", function() { 
      createMaskedInputElement(); 
      element.addClass("ng-hide"); 
      maskedInputElement[0].focus(); 
     }); 
     */ 

     controller.$formatters.push(function (value) { 
      return maskValue(value); 
     }); 

    } 
}; 
}); 

Và đối với cơ sở của bạn, đây là một fiddle với một chút triển khai: http://jsfiddle.net/nqp4qtLk/2/

Làm cách nào để ngăn mô hình bị ảnh hưởng bởi mặt nạ ??

EDIT: Tôi thích ứng với câu trả lời của Gr3g để phù hợp với yêu cầu của tôi

xem fiddle Cập nhật: Updated fiddle

Answer 1

Hãy xem tôi EDITED fiddles:

Nếu bạn không cho phép * 's cần được xóa:
Fiddle

Nếu bạn cho phép *' s cần được xóa:
Punker

Lưu ý:
Nếu bạn cho phép * sẽ bị xóa, bạn sẽ thấy trong plunker Tôi không cho phép sau:
- Xóa (các) dấu sao khi (các) số hiển thị.
- Thêm một số giữa 2 sao hoặc ở vị trí đầu tiên.

Mã đã lớn lên nên tôi chỉ có thể hiển thị cho bạn một phần mã ở đây.
Rõ ràng, bạn cần các $parsers đường ống:

controller.$parsers.push(function(val){ 
//Modify your value 
return modifiedValue || val; 
}); 

Thông báo i thêm 2 chức năng trong mỗi đường ống để tôi có thể truy cập vào một String trong các chức năng mà tôi cần phải thay đổi giá trị. Tôi không phải quan tâm (quá nhiều) về phôi.

controller.$parsers.unshift(function(val){ 
    return String(val); 
}); 

Bạn có thể làm cho nó nhanh hơn, nhưng hãy cẩn thận khi tái cấu trúc để suy nghĩ về mọi khả năng xử lý.Đặc biệt là khi * có thể bị xóa.

Answer 2

Bạn có thể sử dụng $ parsers.push để kiểm soát giá trị được lưu trong mô hình.

var unmask = function(value) { 
     var original = scope.vm.phone.toString();     
     var last4 = value.substring(value.length-4); 
     var newstr = original.substring(0, original.length-4); 
     return (newstr+last4); 
     // you can have whatever logic you want, to manipulate the original value 
    } 

    controller.$parsers.push(function (value) { 
     return unmask(value); 
     // or do what ever you want. 
    }); 

Cập nhật fiddle- http://jsfiddle.net/anh9y8d9/3/

Answer 3

Tôi không nghĩ rằng bạn có thể, hãy tưởng tượng tôi đi giữa 2 điểm và xóa nó, thì làm thế nào bạn sẽ làm gì?

Bạn nên sử dụng 2 thành phần khác nhau: một để nhập từng ký tự, số còn lại hiển thị số điện thoại chỉ có 4 hiển thị cuối cùng.

Cách khó nhất có thể: xử lý tất cả sự kiện chính trên chính mục nhập để bạn thậm chí có thể giải quyết những gì tôi đã nói ở đầu bài đăng của mình.