角度（V1）ディレクティブはマスクする（表示から、ないモデル）テキスト入力フィールドに任意のランダムなサブ

Question

目的：変数NGモデルに影響を与えずに、テキスト入力フィールドのサブストリングをマスク/非表示にする機能

例：$のscope.input.urlがadmin:dilbert@mylocation.host.com

が含まれていますしながら、

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

ユーザーがadmin:dilbert@mylocation.host.comを入力した場合は、表示はこれが可能であるadmin:*******@mylocation.host.com示して？フォームを表示する際に、ユーザーが入力する必要があるURL内のパスワードを隠す必要がある状況があります。回避策は、表示変数とクローンされた実際の変数を保持することですが、それは実際には洗練された解決策ではありません。

さらに動機はこの要件を設定するURLを要求するモバイルアプリです

（以下WilliamBさんのコメントに対処するために）説明しました。

：そのURL はユーザーが基本認証を使用するようにバックエンドサーバーを構成している場合はここ

（このモバイルアプリのすべてのユーザが独自のサーバーを使用しています）基本的な認証資格情報を含めるには、サンプルのスクリーンショットであること尋ねる

URL欄が表示されたらa）のではなく、編集されている、パスワードは、Th1を維持するために、変数モデル

B）に影響を与えずにマスクされていますURLフィールドが編集中の場合、パスワードは通常のテキスト（フォーカス）として表示されます

c）mask='string' askは単純化されました。実際には、このユースケースはmaskとなりそうですが、入力テキストフィールドに添付されていれば、入力がフォーマットのときにパスワードテキストをマスクしますurl://user:password@domain/path

これは基本的なマスキングですが、非常に少数の人々がマスクされているものを見るためにDOMを解剖し始めます

Answer 1

最終的な解決策： - 私の本当の（一般的なマスクが含まれていませんが、必要に応じて簡単に変更することができ、ここで

.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(); 
     }); 
    } 
    } 
}); 

は、例えば、フィドルです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

ngModelのコントローラはDOMのビュー値を設定できます。これと同じように：私が望むとおりに動作しますhttps://jsfiddle.net/7kLb38ys/1/