Question

我需要一个自定义的AngularJS 1.5x组件（在TypeScript中！）来输入日期和时间，这将有一些必需的时区校正逻辑，如下所示：

<date-time value="vm.woComplete.CompleteDate"></date-time>

其中vm.woComplete.CompleteDate是我的数据模型的日期属性。

此组件的TypeScript代码如下：

namespace AppDomain {
    "use strict";

    export class DateTimeComponent {

        require: string = "ngModel";
        bindings: any = { value: "=" };
        template: string = "<input type='date' ng-model='$ctrl.displayValue'><input type='time' ng-model='$ctrl.displayValue'></p>";

        controller: Function = function ($scope) {
            var ctrl = this;

            ctrl.$onInit = function () {
                console.log(arguments);
                ctrl.displayValue = new Date(ctrl.value);
                ctrl.displayValue.setHours(ctrl.displayValue.getHours() - 4);
            }

            $scope.$watch('$ctrl.displayValue', function () {
                var tmpDate = new Date(ctrl.displayValue);
                ctrl.value = tmpDate.setHours(tmpDate.getHours() + 4);
            });
        }

    }

    app.component("dateTime", DateTimeComponent);

}

但我没有得到任何输出。我做错了什么？

我希望使用$onInit和$onChanges而不是$scope.$watch来获得正确的TypeScript代码。

以下是示例，只需将其转换为TypeScript！

http://plnkr.co/edit/D9Oi6le7G9i3hNC2yvqy?p=preview

Answer 1

你使用我从未见过的语法，什么是DetailController？
请尝试使用此语法：

export class Controller {
    value: number;
    displayValue: Date;

    $onInit() {
        this.displayValue = new Date(this.value);
        this.displayValue.setHours(this.displayValue.getHours() - 4);
    };

    $onChanges() {
        const tmpDate = new Date(this.displayValue);
        this.value = tmpDate.setHours(tmpDate.getHours() + 4);
    };
}
const component : angular.IComponentOptions = {
    controller : Controller,
    bindings: { value: "=" },
    template: `
        <p><label>Date:</label><br>
        <input type='date' ng-model='$ctrl.displayValue'></p>
        <p><label>Time:</label><br>
        <input type='time' ng-model='$ctrl.displayValue'></p>`

};
app.component("dateTime", component);

我的Typescript AngularJS 1.5组件有什么问题？

1 个答案: