博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于angularJs 遇到的小坑
阅读量:5963 次
发布时间:2019-06-19

本文共 2254 字,大约阅读时间需要 7 分钟。

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

clipboard.png

首先是对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打包后的坑,之前在开发环境文件没有压缩混淆之前一切都是正常的,但是压缩后报了这样的错误

clipboard.png

我当时就纳闷了,然后就去看代码是否写的规范,是不是分号什么的忘写了什么的。后面才发现自己指令写法有点问题,没有压缩的时候,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时没有固定顺序的,是无序的

    转载地址:http://ygjax.baihongyu.com/

    你可能感兴趣的文章
    算法第二章作业
    查看>>
    python的一些常用函数
    查看>>
    微信公众号教程(19)微信音乐播放器开发 中
    查看>>
    浏览器跨域问题
    查看>>
    部署WEB项目到服务器(二)安装tomcat到linux服务器(Ubuntu)详解
    查看>>
    SpringBoot之SpringBoot+Mybatis+Mysql+Maven整合
    查看>>
    SQLServer BI 学习笔记
    查看>>
    20160504-hibernate入门
    查看>>
    工作四周年
    查看>>
    sql定时自动备份(定时作业)
    查看>>
    Excel 2013 表格自用技巧
    查看>>
    ubuntu安装VNC、Xfce桌面
    查看>>
    浅析支付系统的整体架构
    查看>>
    二位数组
    查看>>
    unix文件权限
    查看>>
    Python 模拟鼠键
    查看>>
    【Marva Collins' Way】第二章
    查看>>
    SDUT OJ 数据结构实验之链表一:顺序建立链表
    查看>>
    舒适的旅行(并查集)
    查看>>
    django-uuslug: 方便的将中文转化成拼音 slug 的工具
    查看>>