javascript - AngularJS 组件数据绑定不起作用

Question

我使用 AngularJS 1.7.8 构建了我的第一个组件，但双向数据绑定不起作用。我可以使用“<”而不是“=”来初始化我的组件。

Javascript 组件

angular.module("App").component("timeComponent", {
    template: "<div class=\"form-group\"><label class=\"control-label col-xs-3\">{{$ctrl.label}}</label><div class=\"col-sm-9\" style=\"display:inline-flex\">" +
        "<select ng-change=\"$ctrl.change()\" ng-model=\"$ctrl.hour\" class=\"form-control\" style=\"width:65px;\">" +
        "<option ng-repeat=\"o in $ctrl.hours\" ng-value=\"o.value\">{{o.label}}</options>" +
        "</select>" +
        "<select ng-change=\"$ctrl.change()\" ng-model=\"$ctrl.minute\" class=\"form-control\" style=\"width:65px;\">" +
        "<option ng-repeat=\"o in $ctrl.minutes\" ng-value=\"o.value\">{{o.label}}</options>" +
        "</select>" +
        "</div></div>",
    bindings: {
        label: "@",
        value: "=",
        min: "<",
        max: "<"
    },
    controller: function () {
        var vm = this;

        vm.hour = 0;
        vm.minute = 0;
        vm.hours = [{ value: 0, label: "0" }, { value: 1, label: "1" }, { value: 2, label: "2" }, { value: 3, label: "3" }, { value: 4, label: "4" }, { value: 5, label: "5" }, { value: 6, label: "6" }, { value: 7, label: "7" }, { value: 8, label: "8" }];
        vm.minutes = [{ value: 0, label: "0" }, { value: 25, label: "15" }, { value: 50, label: "30" }, { value: 75, label: "45" }];

        vm.$onInit = function () {
            vm.min = vm.min || -1;
            vm.max = vm.max || -1;
            console.log("init", vm.value);
            vm.value = vm.value || 0;
            vm.hour = Math.trunc(vm.value);
            vm.minute = Math.trunc(((vm.value - vm.hour) * 100));
            console.log("$onInit", vm);
        }

        vm.change = function () {
            vm.value = vm.hour + (vm.minute / 100);
        }
    }
});

HTML

<time-component value="Object.workHours" label="Hours" max="8.25"></time-component>

使用 $http.get 加载参数“Object.workHours”。

如果我在模板中使用“$ctrl.value”，则显示该值，但如果我在控制器中使用“vm.value”，则该值未定义。

更新

我在这个PLNKR中重现了这个问题

更新

我刚刚找到了解决问题的方法

$scope.$watch(() => this.value,
   (newValue, oldValue) => {
      vm.hour = Math.trunc(this.value);
      vm.minute = Math.trunc(((this.value - this.hour) * 100));
});

这里是带有解决方案的新PLNKR。

标签： javascriptangularjs