범위 내의 newValue $ watch가 정의되지 않았습니다.

Question

텍스트 상자에 입력 한 값의 고유성을 검사하는 지시문을 만들려고합니다. 그러나 newVal과 oldVal은 항상 범위가 정의되지 않았기 때문에 $ watch는 ctrl. $ parsers.push() 함수에 래핑됩니다.

누구나 newVal 및 oldVal이 정의되지 않은 이유를 알고 있습니까? 여기

는 JSFiddle입니다 :

http://jsfiddle.net/charms/v6ttW/7/

HTML

<div ng-app="myApp" ng-controller="TestCtrl"> 
{{testVar}} 
    <form novalidate> 
     <input type="text" name="user.email" ng-model="user.email" email-used="/api/user"/> 
    </form> 
</div> 

AngularJS와

angular.module('myApp', []) 
.controller('TestCtrl', ['$scope',function($scope) { 
    $scope.user = {email: 'abc', name: 'myname'}; 
    $scope.testVar = "Test"; 
}]) 
.directive('emailUsed', [function() { 
     return { 
      require: 'ngModel', 
      link: function(scope, elem, attr, ctrl) { 
       console.log("executing"); 
       ctrl.$parsers.push(function() { 
        ctrl.$setValidity('eaCheckingUniqueValue', true); 
        if(ctrl.$valid) { 
         console.log("valid"); 
         scope.oldValues = []; 
         scope.$watch(attr.ngModel, function(newVal, oldVal) { 
          scope.oldValues.push(newVal); 
          console.log("new value is: " + newVal); 
         }); 
         console.log("valid is true"); 
        } else { 
         console.log("valid is false"); 
        } 
       }); 

Answer 1

이유 당신에게 : 귀하의 질문에 "? 내 지시어에 ngModel의 가치를 얼마나 매번 값 변경"각 파서 함수는 인수로 새로운 값을 수신 정의되지 않은 값을 계속 가져 오는 것은 파서 함수에서 정의 된 값을 반환하지 않기 때문입니다. $위한 각 문서에서

파서 : 기능

어레이 제어 는 DOM로부터 값을 판독 할 때마다 파이프 라인으로 실행할 수 있습니다. 각 함수는 차례로 호출되어 값을 다음 값으로 전달합니다. 유효성 확인과 마찬가지로 값을 으로 sanitize/convert하는 데 사용됩니다. 확인을 위해 파서는 $ setValidity()를 사용하여 유효 상태를 업데이트하고 유효하지 않은 값에 대해 undefined를 반환해야합니다.

파서에 return 문이 없기 때문에 항상 undefined (잘못된 값)를 반환했습니다.

여기 제가 구현하려고 생각했던 것의 working plunker입니다. .이 새로운`범위 $ 시계를 등록하므로,

당신은`범위를 넣어해서는 안

.directive('emailUsed', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elem, attr, ctrl) { 
      scope.oldValues = []; 
      scope.$watch(attr.ngModel, function(newVal, oldVal) { 
       if (angular.isDefined(newVal)) { 
        scope.oldValues.push(newVal); 
       } 
      }); 
      ctrl.$parsers.push(function() { 
       if (ctrl.$viewValue.indexOf('@') !== -1) { 
        ctrl.$setValidity('eaCheckingUniqueValue', true); 
        return ctrl.$viewValue; 
       } 
       ctrl.$setValidity('eaCheckingUniqueValue', false); 
       return undefined; // Model is not valid so return undefined. 
      }); 
     } 
    }; 
}); 

Answer 2

은 대답하기 위해

link: function(scope, elem, attr, ctrl) { 
    console.log("executing"); 
    scope.oldValues = []; 
    ctrl.$parsers.push(function(newVal) { 
     ctrl.$setValidity('eaCheckingUniqueValue', true); 
     if(ctrl.$valid) { 
     console.log("valid"); 
     scope.oldValues.push(newVal); 
     console.log("new value is: " + newVal); 
     } else { 
     console.log("valid is false"); 
     } 
     ... // see mortalapeman's answer for a complete parser implementation 
    }); 
} 

fiddle