Javascript 加密AngularJS中的ngModel值

我想（使用任何算法）加密

ngModel

的值。只有

$modelValue

应该加密，而视图值应该是纯文本

为此，我提出了一个小型定制指令：-

angular.module('utilityModule').directive('encrypt', function() {
    var aesUtil = new AesUtil(128, 10);
    return {
        restrict: 'A',
        require: 'ngModel',
        replace: false,
        compile: function(tElem, tAttrs) {
            var modelName = tAttrs['ngModel'];
            var pattern = tAttrs['ngPattern']; // to check if there is ngPattern directive used.
            return {
                pre: function(scope, element, attrs, fn) {
                    // to avoid encrypting on every key press.
                    fn.$options = {
                        updateOn: 'blur'
                    };
                    fn.$parsers.push(function(value) {
                        //encrypt
                        console.log('parser invoked');
                        return value ? aesUtil.encrypt(modelName, modelName, modelName, value) : value;
                    });
                    fn.$formatters.push(function(value) {
                        //decrypt
                        console.log('formatter invoked');
                        return value ? aesUtil.decrypt(modelName, modelName, modelName, value) : value;
                    });
                    fn.$validators.pattern = function(){
                        // trying to overrule ngPattern directive. DOESN'T HELP!!
                        return true;
                    };
                    // Just for playing around
                    fn.$validators.amyValid = function(modelValue, viewValue) {
                        console.log('Custom validator invoked. modelValue=' + modelValue + ' and viewValue=' + viewValue);
                        return true;
                    };
                },
                post: function(scope, element, attrs, fn) {}
            };
        }
    };
});

该指令有效，除非我们将ngPattern与ngModel指令一起使用。例如：-

<div class="table-responsive" ng-form="testForm">
        <input name="test" type="text" ng-model="test" encrypt ng-pattern="/^[0-9]+$/"/>
        <br>
        {{test}}
    </div>

{{test}}

我的期望：-

ngPattern

指令应使用

$viewValue

而不是

$modelValue

进行验证

如何覆盖core

angular.js

中存在的“

patternDirective

”指令

或任何其他建议

更新1 刚刚意识到不仅仅是

ngPattern

，所有其他验证（maxLength、minLength、max、min）都应该只应用于视图值

更新2 我的调试器显示传递给patternDirective验证器的值是加密的值。请参阅所附的屏幕截图

更新3

---

升级到angularjs 1.4.5修复了该问题。我相信1.3.x对模型值而不是视图值进行了验证。

升级到angularjs 1.4.5解决了这个问题。我相信1.3.x对模型值进行了验证，而不是对视图值进行验证。

可能键入：

fn.$validators.amyValid

>模式指令验证视图value@PetrAveryanov-明白了。但是为什么在我使用ng模式时这不起作用呢？@PetrAveryanov-请看更新2，一切都按预期进行。再次检查您如何加密/解密