angularjs - 在 Angular 分量上触发 $scope.$watch

Question

我有这个组件可以正常工作。它执行 utc->local 和 local->utc 转换(应用逻辑需要)。

在模型中，日期始终为 utc，但为了显示它们的日期需要以本地时间显示，当在 UI 中更改时，模型将具有 utc 转换后的日期。

$scope.$watch 按预期工作 - 当用户尝试更改日期时。

唯一的问题是 - 如果用户决定不更改日期，则此 $scope.$watch 不会被触发，并且不会有任何转换。

遇到这种情况我该怎么办？

Angular/TypeScript 组件:

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:

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 的功能，它会触发您指定的监听器回调。当用户不做任何更改时，模型不脏，因此 $watch 不会触发。

这里有两件事在起作用:当模型改变时， View 应该更新，当 View 改变时，底层模型应该更新。

更新的答案

根据评论中的对话，我会编写一个过滤器来简单地进行转换(UTC -> 本地显示值)并在 UI 中使用它。

这是一种更简洁的方法，如果用户未进行任何更改，则不会要求您跳过转换显示值的步骤。然后，您的组件只有在用户发起更改时才会转换，它已经这样做了。