1

基本上，我正在尝试为日期选择器编写指令。在此指令中，我使用 ng-model 的变量将更改的值反映到父控制器。但我有一些问题。我不知道如何设置 ng-model 变量的初始值。其次，我不知道如何更新 ng-model 变量并对其进行验证。

我试过这样的事情。

angular.module("mainModule.directives").directive('datePicker', function () {
    var directive = {
        restrict: 'E',
        replace : false,
        template : '<input ng-model="date" type="text"/>',
        require : 'ngModel',
        scope : {},
        link : function($scope, elem, attr, ngModelCtr) {
            $scope.date = ngModelCtr.$viewValue;

            function fromUser(text) {
                $scope.date = ngModelCtr.$viewValue;
            }

            function toUser(text) {
                ngModelCtr.$setViewValue($scope.date);
            }

            ngModelCtr.$parsers.push(fromUser);
            ngModelCtr.$formatters.push(toUser);
        }
    };

    return  directive;
});

<date-picker ng-model="modelDate"></date-picker>
4

2 回答 2

1

解析器和格式化程序使用现有值，应该返回我认为的解析或格式化结果。您可以设置ngModelController.$render为值更改时将调用的函数，然后ngModelController.$setViewValue在需要时使用它来更新值。这是一个使用momentjs仅在输入有效日期（小提琴）时才更新底层模型的小提琴：

link : function(scope, elem, attr, ctrl) {
    ctrl.$render = function() {
        scope.date = moment(ctrl.$viewValue).format("YYYY-MM-DD");
    };
    scope.$watch('date', function(newValue, oldValue) {
        // only update if it is a valid date string
        var m = moment(newValue);
        if (m.isValid()) {
            ctrl.$setViewValue(m);
        }
    });
}
于 2014-12-28T21:14:39.767 回答
0

您需要通过以下方式将 viewValue 呈现给 DOM

ngModelController.$render()
于 2014-12-28T15:33:55.940 回答