关于angularJs 遇到的小坑

时间 2019-12-05

原文原文链接

最近作一个项目，应该来讲比较简单的输入框验证ip地址而已，容许空值javascript

首先是对ip地址进行检验匹配是否正确，开始我在指令中是这样写的。我输入空格后会提示输入有误，但是这就有一个问题了，我在输入框中删除空格后提示并不会消失，我就想应该先判断dns是否输入空格，但是各类姿式事后我发现没有办法区分是否输入空格。html

/**
     * 检验ip
     */
    jbconsole.directive('checkIp', [function () {
        return {
            require: "ngModel",
            link: function (scope, element, attr, ngModel) {
                if (ngModel) {
                    var ipRegexp = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
                }
                var customValidator = function (value) {
                    if (/^\s+$/.test(value)) {
                        var validity = ipRegexp.test(value);
                    } else {
                         validity = ngModel.$isEmpty(value)
                    }
                    console.log(validity)
                    ngModel.$setValidity("checkIp", validity);

                    return validity ? value : undefined;
                };
                ngModel.$formatters.push(customValidator);
                ngModel.$parsers.push(customValidator);
            }
        }
    }])

jade中java

input.form-control(type='text' 
                    name='dns' ng-model='appForm.dns' 
                    placeholder='255.255.255.255' 
                    check-ip)
.text-fail(ng-if='appNewForm.dns.$invalid' ) 输入有误

而后我想是否是angular的ng-model 对空格进行了处理，遂在本地进行了一个测试,监听ipt的值变化，发现空字符和有空格的字符串是有区别的，果真是ng-model对字符串进行了trim()操做程序员

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <input type="text" name="item" id='ipt' oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" focused>
    <div id='iptLength'></div>

</body>
<script type="text/javascript">
    var ipt=document.getElementById('ipt')
    var iptLength=document.getElementById('iptLength');
    var value=ipt.value;
    iptLength.innerHTML='当前字符串为'+value.length
    function OnInput (event) {
         value=ipt.value;
        iptLength.innerHTML='当前字符串为'+value.length

       }

</script>
</html>

接下来，经过google，发现须要加上ng-trim="false"这个指令就能够了，看来google才是程序员真爱app

这个问题虽然是一个小问题，是我对angular学习的不够深入，记录下来万一你们和我遇到了一样的困扰了呢学习

在作项目的时候遇到了一个angular打包后的坑，以前在开发环境文件没有压缩混淆以前一切都是正常的，可是压缩后报了这样的错误
测试

我当时就纳闷了，而后就去看代码是否写的规范，是否是分号什么的忘写了什么的。后面才发现本身指令写法有点问题，没有压缩的时候，angular能正常的注入，可是压缩后没法工做ui

angular.module("myApp").directive("permissionAccess", function($rootscope, $timeout) {  });

须要改为google

angular.module("myApp").directive("permissionAccess", ['$rootscope','$timeout',function($rootscope, $timeout) {  }]);

其实也不是坑，就是写代码呢必定要按规范来spa

嗯，记录一个并非anuglar的问题，也不属于坑，可是属于本身对基础知识掌握的不闹靠照成的错误

列子：

$scope.obj = {
                '1238fdd' : {a:'1'},
                '7614c08' :{a:'1'},
                'c7b2636' : {a:'1'},
                '39696a0' :{a:'1'},
            };
<li ng-repeat="(key,val) in obj">{{key}}_{{val.a}}</li>

获得的结果并非想的按顺序渲染的

就是ng-repeat 对象时，并非按照顺序来的，其实就是由于Object类型for in时没有固定顺序的，是无序的