Угловая (v1) директива, чтобы замаскировать (от дисплея, а не модель) любые случайные подстрок в поле ввода текста

Question

Цель: Возможность скрыть/замаскировать подстроку поля ввода текста, не влияя на нг-модели переменной

Пример:

<input type="text" placeholder="enter URL" ng-model="input.url" mask="dilbert"> 

Если пользователь вводит admin:dilbert@mylocation.host.com то дисплей показывает admin:*******@mylocation.host.com в то время как $ scope.input.url будет содержать admin:dilbert@mylocation.host.com

возможно ли это? У меня есть ситуация, когда мне просто нужно скрывать пароль внутри URL-адресов при отображении форм, если пользователь вводит его. Обходным путем является сохранение переменной отображения и клонированной фактической переменной, но это не очень элегантное решение.

Дополнительная мотивация объяснено (обратиться комментарий WilliamB в ниже)

Это требование для мобильных приложений, который требует URL, который необходимо настроить. Этот URL может включать основные AUTH полномочия, если пользователь настроил сервер бэкэнда использовать базовую авторизацию (Каждый пользователь этого мобильного приложения использует свой собственный сервер)

Вот пример снимка экрана: с

аск

а) Когда отображается поле URL, но не редактируется, пароль маскируется, не затрагивая модель переменной

б) Чтобы сохранить Тхи s просто, когда поля URL редактируются, пароль отображается как обычный текст (в фокусе)

c) mask='string' ask был упрощением. На самом деле, это UseCase, вероятно, будет mask директивой и если он подключен к текстовому полю ввода, будет маскировать текст пароля при входе в формате url://user:password@domain/path

Я понимаю, что это только базовая маскировка - но его мобильное приложение, и очень немногие люди начнут рассекать DOM, чтобы посмотреть, что замаскировано

Answer 1

Окончательное решение, которое работает точно так же, как я хочу: (не включает в себя общую маску, но может быть легко изменен в случае необходимости - мой реальный необходимо было скрыть пользователя: поле пароля URI)

//credit: http://stackoverflow.com/a/23931217/1361529 
.directive('hidepassword', function() { 

    var modelSet = function (str) 
    { 

     return str; 
    }; 

    var viewSet = function (str) 
    { 
     //URI.js: https://github.com/garycourt/uri-js 
     if (!str) return str; 
     var c = URI.parse(str); 
     if (c.userinfo) c.userinfo="***:***"; 
     var vc = URI.serialize({scheme : c.scheme, 
           userinfo: c.userinfo, 
           host: c.host, 
           port: c.port, 
           path: c.path, 
           query: c.query, 
           fragment: c.fragment 
           }); 
     console.log ("CONVERTED IS "+vc); 


     return vc; 
    }; 

    return { 

    restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, element, attr, ngModel) { 
     ngModel.$parsers.push(modelSet); 
     ngModel.$formatters.push(viewSet); 

     element.bind('blur', function() { 
      element.val(viewSet(ngModel.$modelValue)); 
     }); 
     element.bind('focus', function() { 
      element.val(ngModel.$modelValue); 
     }); 

     } 
    }; 
}) 

Answer 2

ngМодель контроллера дает возможность установить значение представления для DOM. Как так:

.directive('mask', function() { 
    return { 
    require: 'ngModel', 
    link: function (scope, elem, attrs, ngModelCtrl) { 
     scope.$watch(attrs.ngModel, function (newVal, oldVal) { 
     var mask = attrs.mask.replace(/./g, function() { return '*' }); 
     ngModelCtrl.$viewValue = newVal.replace(attrs.mask, mask); 
     ngModelCtrl.$render(); 
     }); 
    } 
    } 
}); 

вот пример скрипка: https://jsfiddle.net/7kLb38ys/1/