2014-09-09 2 views
10

ngModelController 파싱 파이프 라인의 동작이 각도 1.2와 1.3 사이에서 변경된 것으로 보입니다. 이제 모든 $error 객체에 'parse'이라는 새 유효성 검사 키가 추가 된 것을 볼 수 있으며, 파서 중 하나가 undefined를 반환하면 이미 설정되었을 수있는 다른 모든 유효성 검사 키를 재정의하거나 바꿉니다. 예를 들어각도 1.3의 새로운 '구문 분석'유효성 검사 키의 목적은 무엇입니까?

는, 여기 각도 1.2.23에서 동작하는 예제입니다 - 범위를 벗어난 숫자를 입력하십시오 :

http://jsfiddle.net/8doq0saf/5/

1.3 RC에서 실행 같은 일이 다른 결과를 제공합니다

http://jsfiddle.net/1t52s9b2/4/

이 변경 사항에 대한 문서를 아직 찾을 수 없습니다. 구문 분석 키의 용도는 무엇이며 이전 코드를 다시 사용하려면 코드를 어떻게 변경해야합니까?

angular.module('app', []).directive('number', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elem, attrs, ctrl) { 

      // valid number 
      ctrl.$parsers.push(function (value) { 
       var valid = angular.isUndefined(value) || value === '' || isFinite(value); 
       ctrl.$setValidity('number', valid); 
       return valid 
        ? angular.isUndefined(value) || value === '' ? undefined : Number(value) 
        : undefined; 
      }); 

      ctrl.$parsers.push(function (value) { 
       if (!angular.isDefined(attrs.minNumber)) { 
        return value; 
       } 
       var valid = angular.isUndefined(value) || Number(value) >= Number(attrs.minNumber); 
       ctrl.$setValidity('minNumber', valid); 
       return valid ? value : undefined; 
      }); 

      ctrl.$parsers.push(function (value) { 
       if (!angular.isDefined(attrs.maxNumber)) { 
        return value; 
       } 
       var valid = angular.isUndefined(value) || Number(value) <= Number(attrs.maxNumber); 
       ctrl.$setValidity('maxNumber', valid); 
       return valid ? value : undefined; 
      }); 
     } 
    }; 
}); 

답변

27

각도 1.3 합리화 가지 을 확인하는 및 을 분석하는 사이에 깨끗한 구별을합니다. 구문 분석

각도가 자동으로 따라 설정 값을 가진 모든 $error 컬렉션에 '구문 분석'키를 추가 - true 파서의 달리 undefined, false을 반환합니다.

구문 분석 할 수없는 값 (숫자에 대해 입력 한 alpham, 형식이 잘못된 날짜 등)에 대해서는 undefined을 반환해야합니다. 이렇게하면 Angular에서 이미 $error 키를 모두 제거하고 전체 개체를 { "parse": true }으로 바꿉니다. 파서가 더 이상 실행되지 않습니다. 모델이 업데이트되지 않습니다. $parsers 배열은 구문 분석에만 사용됩니다.

검증

ngModelController 우리가 검증 기능을 할당 할 수있는 새로운 $validators 속성이 있습니다. 파싱 ​​파이프 라인이 성공한 경우에만 실행됩니다. 필수 데이터 유형으로 구문 분석 할 수 있지만 단지 유효하지 않은 값 (문자열이 너무 길거나 숫자가 범위를 벗어남 등)에 대해이 함수 중 하나에서 false를 반환합니다. 유효성 검사기 기능의 이름은 $error 개체의 유효성 검사 키가됩니다. false을 반환하더라도 모든 유효성 검사기가 실행됩니다. 유효성 검사가 성공적으로 수행 된 경우에만 모델이 업데이트됩니다.

사람들은 잘못된 값으로 인해 파서에서 undefined을 자주 반환하기 때문에 기존 응용 프로그램의 변경 사항 일 수 있습니다.여기

ctrl.$validators.minNumber = function (value) { 
    return !value || !angular.isDefined(attrs.minNumber) || (value >= Number(attrs.minNumber)); 
}); 

가 고정 모든 것을 가진 지시자이다,이 대신 유효성 검사 기능으로 이동해야 새로운 제도 하에서

ctrl.$parsers.push(function (value) { 
    if (!angular.isDefined(attrs.minNumber)) { 
     return value; 
    } 
    var valid = angular.isUndefined(value) || Number(value) >= Number(attrs.minNumber); 
    ctrl.$setValidity('minNumber', valid); 
    return valid ? value : undefined; 
}); 

: 여기가 전형적인 예이다 있었다 것입니다 :

angular.module('app', []).directive('number', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elem, attrs, ctrl) { 

      // valid number 
      ctrl.$parsers.push(function (value) { 
       if(value === '') return value; 
       return isFinite(value) ? Number(value) : undefined; 
      }); 

      ctrl.$validators.minNumber = function (value) { 
       return !value || !angular.isDefined(attrs.minNumber) || (value >= Number(attrs.minNumber)); 
      }; 

      ctrl.$validators.maxNumber = function (value) { 
       return !value || !angular.isDefined(attrs.maxNumber) || (value <= Number(attrs.maxNumber)); 
      }; 
     } 
    }; 
}); 

http://jsfiddle.net/snkesLv4/10/

나는 정말이 새로운 방법처럼 - 그것은 m은 uch 클리너.

+2

예를 들어 실제로 새로운'$ validators' 파이프 라인을 사용해야합니다. 'ctrl. $ validators.minNumber = function (val) {/ * ... * /}' – JJJ

+0

고마워, 나는이 새로운 기능에 대해 전혀 몰랐다. –