Блог

Мне нужен пользовательский компонент AngularJS 1.5x (в TypeScript!) для ввода даты и времени, который будет иметь некоторую требуемую логику коррекции часового пояса, например, такую:

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

где vm.woComplete.CompleteDate находится свойство date моей модели данных.

Код 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);

}
  

Но я не получаю никаких выходных данных. Что я делаю не так?

Я хочу иметь правильный код TypeScript с $onInit и $onChanges вместо $scope.$watch .

Вот пример, просто нужно преобразовать его в TypeScript!

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

Вы используете синтаксис, которого я никогда не видел, и что это 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);