각도 구성 요소에서 $ scope. $ watch

Question

잘 작동하는이 구성 요소가 있습니다. utc-> local 및 local-> utc 변환을 수행합니다 (응용 프로그램 논리에서 필요함).

모델에서 날짜는 항상 utc이지만 표시하려면 현지 시간으로 표시해야하며 UI가 변경되면 utc는 날짜로 변환됩니다.

$ scope. $ watch는 예상대로 작동합니다 - 사용자가 날짜를 변경하려고 할 때.

유일한 문제는 사용자가 날짜를 변경하지 않기로 결정한 경우이 $ scope입니다. $ watch 은 실행되지 않으며은 변환되지 않습니다.

이 상황에서 나는 무엇을 할 수 있습니까?

각도/타이프 라이터 구성 요소 :

class RsDateTimeController { 
    value: Date; 
    displayValue: Date; 

    static $inject = ["$scope"]; 

    constructor($scope: ng.IScope) { 
     $scope.$watch(
      "$ctrl.displayValue", 
      (newValue: Date, oldValue: Date) => { 
       if (newValue != oldValue) { 
        this.value = Utility.toUtcDate(newValue); 
       } 
      } 
     ); 
    } 

    $onInit() { 
     if (this.value) { 
      this.displayValue = Utility.toLocalDate(this.value); 
     } 
    } 

} 

class RsDateTimeComponent implements ng.IComponentOptions { 
    public bindings: any; 
    public controller: any; 
    public template: string; 

    constructor() { 
     this.template = "<input type='datetime-local' class='form-control' ng-model='$ctrl.displayValue'>"; 
     this.bindings = { 
      value: "=" 
     }; 
     this.controller = RsDateTimeController; 
    } 
} 

HTML : 정확히 $watch의 기능입니다

app.component("rsDatetime", new RsDateTimeComponent()); 

    <div class="form-group"> 
     <label>@("Status Date".T())</label> 
     <rs-datetime ng-if="vm.woChangeStatus" value="vm.woChangeStatus.StatusDate"></rs-datetime> 
    </div> 

Answer 1

, 그것은 사용자가 지정한 리스너 콜백을 발사합니다. 사용자가 변경하지 않으면 모델이 더럽지 않으므로 $watch이 실행되지 않습니다.

여기에는 두 가지가 있습니다. 모델이 변경되면보기가 업데이트되고보기가 변경되면 기본 모델이 업데이트되어야합니다.

업데이트 대답

이 코멘트에 대화를 바탕으로, 단순히 변환을 수행하는 필터를 작성합니다 (UTC -> 로컬 디스플레이 값)과 UI에 그것을 사용할 수 있습니다.

이것은 훨씬 더 깔끔한 접근법이며 사용자가 변경하지 않으면 표시 값을 변환하는 작업을 수행하도록 요청하지 않습니다. 구성 요소는 사용자가 이미 변경 한 사항 만 변경하면 변환됩니다.