AngularJS : ngModelController $ formatters로 null 또는 정의되지 않은 값을 형식화 할 수 없습니다.

Question

지시어의 ng 모델을 통해 컨트롤러 범위에서 값을 전달받는 자체 모델을 가진 텍스트 입력을 포함하는 AngularJS 지시문이 있습니다.

체크 아웃이 펜 (아래 & 코드) : http://codepen.io/ericwshea/pen/KwXRyr

문제는 때때로 그 모델이 나는 형식을 텍스트 입력의 ngModelController을 사용하고자하는 경우 null 또는 정의되지 않은 값을, 될 일이다 텍스트 입력에 null 값을 'NULL'과 같이 표시합니다.

값이 null 인 경우 값이 일치하는 임의의 문자열 인 경우 작동합니다 (정의되지 않은 동일한 결과로 테스트 함).

이것에 대한 통찰력/해결 방법은 $ formatters의 단점입니까?

HTML :

<div ng-app="app" class="container"> 
    <div ng-controller="ctrl" class="col-md-12"> 
    <form> 
     <input-directive ng-model="model"></input-directive> 
     <input-directive ng-model="model2"></input-directive> 
     <div ng-if="model">Model 1: {{model}}</div> 
     <div ng-if="model2">Model 2: {{model2}}</div> 
    </form> 
    </div> 
</div> 

JAVASCRIPT :

angular.module('app', []) 
    .controller('ctrl', function($scope) { 
    $scope.model = null; 
    $scope.model2 = 'make this null'; 
    }) 

    .directive('inputDirective', function() { 
    var template = 
     '<div>'+ 
      '<div class="input-group">'+ 
      '<input type="text" class="form-control" ng-model="localModel">'+ 
      '<span class="input-group-btn">'+ 
       '<button ng-click="save()" class="btn btn-default" type="button">Save</button>'+ 
      '</span>'+ 
      '</div>'+ 
     '</div>'; 

    function link (scope, elem, attr) { 
     var inputModelCtrl = elem.find('input').controller('ngModel'); 

     function formatter(val) { 
     if (val === 'make this null') { 
      return scope.nullValue; 
     } 
     if (val === null) { 
      return scope.nullValue; 
     } 
     return val; 
     } 

     scope.nullValue = 'NULL'; 
     scope.localModel = scope.ngModel; 
     scope.save = function() { 
     scope.ngModel = scope.localModel; 
     } 
     inputModelCtrl.$formatters.push(formatter); 
    } 

    return { 
     restrict: 'E', 
     replace: true, 
     require: 'ngModel', 
     template: template, 
     link: link, 
     scope: { 
     ngModel: '=' 
     } 
    } 
    }) 
; 

Answer 1

내가 이것에 대한 해결 방법을 알아낼 수 있었다. ngModel에 watch를 놓고 null을 잡아서 '$'로 지정하여 지시문이 작성되면 값을 초기화합니다. 각 각도 $ 포맷터는 실제로 형식을 지정합니다. localModel의 뷰 값을로 포맷하고 작동합니다.

지시어에서 컨트롤러 범위로 'NULL'을 돌려 보낼 때 모델 값이 올바른지 확인하기 위해 ngModelController에서 $ 파서를 사용하여 'NULL'을보고 null로 변환합니다.

ngModel의 지시문에있는 $ watch는 지시어 외부에서 값이 null로 설정되면 localModel이 'NULL'로 다시 초기화되고 올바른 표시를 위해 포맷되도록합니다.

이것은 실제적이지 않은 것처럼 보일지 만 실제 실제 지시문은 상상할 수있는 것처럼이 기능을 필요로하는 사용자 지정 선택 메뉴입니다.

현재 변경 내용을 볼 수 있습니다 http://codepen.io/ericwshea/pen/KwXRyr

angular.module('app', []) 
    .controller('ctrl', function($scope) { 
    $scope.model = null; 
    $scope.getModel = function() { 
     return $scope.model === null ? 'null' : $scope.model; 
    } 
    $scope.setToNull = function() { 
     $scope.model = null; 
    } 
    }) 

    .directive('inputDirective', function() { 
    var template = 
     '<div>'+ 
      '<div class="input-group">'+ 
      '<input type="text" class="form-control" ng-model="localModel">'+ 
      '<span class="input-group-btn">'+ 
       '<button ng-click="save()" class="btn btn-default" type="button">Save</button>'+ 
      '</span>'+ 
      '</div>'+ 
     '</div>'; 

    function link (scope, elem, attr, ngModelCtrl) { 
     var inputModelCtrl = elem.find('input').controller('ngModel'); 
     var nullDisplay = '<NULL>'; 

     function ngModelParser(val) { 
     if (val === 'NULL') return null; 
     return val; 
     } 

     function localModelFormatter(val) { 
     if (val === 'NULL') return nullDisplay; 
     return val; 
     } 

     scope.save = function() { 
     ngModelCtrl.$setViewValue(scope.localModel); 
     console.log(ngModelCtrl.$modelValue); 
     } 

     scope.$watch('ngModel', function(val) { 
     if (val === null) val = 'NULL'; 
     scope.localModel = val; 
     }) 

     inputModelCtrl.$formatters.push(localModelFormatter); 
     ngModelCtrl.$parsers.push(ngModelParser); 
    } 

    return { 
     restrict: 'E', 
     replace: true, 
     require: 'ngModel', 
     template: template, 
     link: link, 
     scope: { 
     ngModel: '=' 
     } 
    } 
    }) 
; 

을 나는이 시나리오 오히려 특정 경우에도이 비슷한 문제로 실행하는 사람을 도움이되기를 바랍니다 (내가 나 자신에 대답했다 충분히 특정!)