Question

基本上，我正在尝试为日期选择器编写指令。在此指令中，我使用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>

Answer 1

解析器和格式化程序使用现有值，并且应该返回我认为已解析或格式化的结果。您可以将ngModelController.$render设置为值在更改时调用的函数，然后使用ngModelController.$setViewValue在需要时更新值。如果输入了有效日期（momentjs），这里显示使用fiddle仅更新基础模型的小提琴：

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);
        }
    });
}

Answer 2

您需要通过

将viewValue呈现给DOM

ngModelController.$render()

从指令更改ng-model值

2 个答案: