资讯专栏INFORMATION COLUMN

关于angularJs 遇到的小坑

RaoMeng / 2753人阅读

摘要:最近做一个项目,应该来说比较简单的输入框验证地址而已,允许空值首先是对地址进行检验匹配是否正确,开始我在指令中是这样写的。

最近做一个项目,应该来说比较简单的输入框验证ip地址而已,允许空值

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

    /**
     * 检验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中

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()操作




    


    
    

接下来,通过google,发现需要加上ng-trim="false"这个指令就可以了,看来google才是程序员真爱

这个问题虽然是一个小问题,是我对angular学习的不够深刻,记录下来万一大家和我遇到了同样的困扰了呢

在做项目的时候遇到了一个angular打包后的坑,之前在开发环境文件没有压缩混淆之前一切都是正常的,但是压缩后报了这样的错误

我当时就纳闷了,然后就去看代码是否写的规范,是不是分号什么的忘写了什么的。后面才发现自己指令写法有点问题,没有压缩的时候,angular能正常的注入,但是压缩后无法工作

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

需要改成

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

其实也不是坑,就是写代码呢一定要按规范来

嗯,记录一个并不是anuglar的问题,也不属于坑,但是属于自己对基础知识掌握的不闹靠照成的错误

列子:

 $scope.obj = {
                "1238fdd" : {a:"1"},
                "7614c08" :{a:"1"},
                "c7b2636" : {a:"1"},
                "39696a0" :{a:"1"},
            };
  • {{key}}_{{val.a}}
  • 得到的结果并不是想的按顺序渲染的

    就是ng-repeat 对象时,并不是按照顺序来的,其实就是因为Object类型for in时没有固定顺序的,是无序的

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/86909.html

    相关文章

    • python打包exe后设置随系统启动并读取配置文件遇到一点小坑

      摘要:打包成一个文件,这个技术网上有不同的框架技术可以实现,就略过了,我用的是。这里主要说的是,当这个配置成随系统启动,则是自动启后,当你试图读取同一目录下的文件的时候,会发现找不到该文件。 python打包成一个exe文件,这个技术网上有不同的框架技术可以实现,就略过了,我用的是pyinstaller。 这里主要说的是,当这个exe配置成随系统启动,则是自动启后,当你试图读取同一目录下的文...

      shixinzhang 评论0 收藏0
    • 【PPic】基于Electron+Vue+iView图床应用设计

      摘要:其实这个应用并不是那么的特别需求,一来本人写越来越少,二来开发工作也是越做越少,再者目前的编辑器几乎都支持直接剪切板上传图片,使图床应用的场景越来越少。 其实这个应用并不是那么的特别需求,一来本人写blog越来越少,二来开发工作也是越做越少,再者目前的编辑器几乎都支持直接剪切板上传图片,使图床应用的场景越来越少。不过本人本着不想丢弃技术的内心想法,以及锻炼自己写一个完整项目,还是开启了...

      call_me_R 评论0 收藏0
    • 使用java google protobuf遇到一个小坑

      摘要:公司使用来作为通讯格式,一个同事这样的写法文件格式使用的时候这时候拿到的是一个要是改成这样这时候拿到的是一个为什么会出现这种情况呢读了源码才知道是这样处理的这里发现只要才会进行包装,要不调用的是那么是什么时候变成不为呢继续看代码发现只要是调 公司使用protobuf来作为通讯格式,一个同事这样的写法proto文件格式: message PlayerFightQueue { op...

      tinysun1234 评论0 收藏0
    • 微信样式组件遇到小坑

      摘要:在引入官方的文件时,不起作用,如图然后我们来看下页面的效果然后经过一番作死之后,我把下划线改成了中隔线,上代码看看效果效果如下图纯属个人小分享,请大牛略过 在引入官方的文件时,不起作用,如图:showImg(https://segmentfault.com/img/bVMplF?w=837&h=154); 然后我们来看下页面的效果:showImg(https://segmentfaul...

      lushan 评论0 收藏0
    • 微信样式组件遇到小坑

      摘要:在引入官方的文件时,不起作用,如图然后我们来看下页面的效果然后经过一番作死之后,我把下划线改成了中隔线,上代码看看效果效果如下图纯属个人小分享,请大牛略过 在引入官方的文件时,不起作用,如图:showImg(https://segmentfault.com/img/bVMplF?w=837&h=154); 然后我们来看下页面的效果:showImg(https://segmentfaul...

      余学文 评论0 收藏0

    发表评论

    0条评论

    RaoMeng

    |高级讲师

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <