關於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時沒有固定順序的，是無序的

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。