Question

我有这个组件可以正常工作。它执行utc-> gt; local和local-＆gt; utc转换（app逻辑需要）。

在模型中，日期始终为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不会触发。

这里有两件事情发生：当模型发生变化时，应该更新视图，当视图发生变化时，应该更新底层模型。

更新了答案

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

这是一种更清洁的方法，并且如果用户不做任何更改，则不会要求您跳过转换显示值的箍。然后，只有在用户启动更改时，您的组件才会转换。

触发$ scope。$ watch on angular component

1 个答案: