Angular 지시어에서 모델과 뷰 값을 모두 업데이트하는 방법은 무엇입니까?

Question

사전에 사과드립니다. 지침이 내 강한 의도는 아닙니다!

필드에있는 문자열을 blur 필드에 자동으로 HH : mm 형식으로 변환하는 데 사용되는 간단한 특성 전용 지시문이 있습니다.

(function() { 

    'use strict'; 

    angular 
     .module('app.format-as-time') 
     .directive('formatAsTime', timeDirective); 

    timeDirective.$inject = [ 
     'isValid' 
    ]; 

    function timeDirective (isValid) { 

     return { 
      require: 'ngModel', 
      restrict: 'A', 
      link: LinkFunction 
     }; 

     function LinkFunction (scope, elem, attrs, ngModel) { 

      elem.bind('blur', function() { 

       var currentVal = ngModel.$modelValue, 
        formattedVal = ''; 

       // Format something like 0115 to 01:15 
       if (currentVal.length === 4) { 
        formattedVal = currentVal.substr(0, 2) + ':' + currentVal.substr(2, 2); 

       // Format something like 115 to 01:15 
       } else if (currentVal.length === 3) { 
        formattedVal = '0' + currentVal.substr(0, 1) + ':' + currentVal.substr(1, 2); 

       // Format something like 15 to 00:15 
       } else if (currentVal.length === 2) { 
        formattedVal = '00:' + currentVal; 
       } 

       // If our formatted time is valid, apply it! 
       if (isValid.time(formattedVal)) { 
        scope.$applyAsync(function() { 
         ngModel.$viewValue = formattedVal; 
         ngModel.$render(); 
        }); 
       } 

      }); 
     } 

    } 

}()); 

및 관련보기 :

<div ng-controller="TestController as test"> 
    <input type="text" 
      maxlength="5" 
      placeholder="HH:mm" 
      ng-model="test.startTime" 
      format-as-time> 
    <button ng-click="test.getStartTime()">Get Start Time</button> 
</div> 

및 관련 컨트롤러 : 지시어 인 뷰하지만 모델에 대한 예상대로

(function() { 

    'use strict'; 

    angular 
     .module('app.testModule') 
     .controller('TestController', TestController); 

    function TestController() { 

     var vm = this; 

     vm.startTime = ''; 

     vm.getStartTime = function() { 
      console.log(vm.startTime); 
     } 

    } 

}()); 

현재, 지시어 작동 내 컨트롤러가 업데이트되지 않습니다에, 입력이 01:15이 포함됩니다 즉,하지만 모델 것이다 console.log() (115)

이 지침에서

scope: { 
    ngModel: '=' 
} 

하지만 아무 짓도 안 했어요 :

나는 사용하여 시도했다. 내가 모델과 뷰 모두를 확인하기 위해 추가해야 할 동기화에 남아 어떤 그렇다면

나는이 올바른 방법으로 일을하고 있나요? 나는이 길을 잘못했을 경우

, 어떻게 제대로 할 수있는 가장 좋은 방법이 될 것입니다?

Answer 1

문제는 각도가 등록 $ 파서 및 $ 유효성 검사기를 통해 실행 포함하는 modelValue을 설정하는 데 사용되는 파이프 라인을 가지고이 줄 ngModel.$viewValue = formattedVal;에있다. 값을 설정하는 올바른 방법은이 파이프 라인을 통해 값을 실행할 $setViewValue(formattedVal)을 호출하는 것입니다. isValid 서비스 란 무엇