加密AngularJS中的ngModel值

时间:2015-09-22 12:30:24

标签: javascript angularjs encryption

我想加密(使用任何算法)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>

我的期望: -

ngPattern指令应使用$viewValue代替$modelValue进行验证。

如何覆盖&#39; patternDirective&#39;指令出现在核心angular.js

或任何其他建议......

更新1

刚才意识到不只是ngPattern,所有其他验证(maxLength,minLength,max,min)都只应用于视图值

更新2

我的调试器显示传递给patternDirective验证器的值是加密验证器。请参阅随附的屏幕截图。encrypted value passed to patternDirective validator

更新3

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

1 个答案:

答案 0 :(得分:2)

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