Question

我试图使用ngReadonly withing指令，但我的代码无法正常工作：

app.directive('jqdatepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {



            $(function(){
                element.datepicker({
                    dateFormat:'mm/dd/yy',
                    onSelect:function (date) {

                            scope.$watch(attrs.ngReadonly, function(value) {

                                console.log(value);
                                scope.$apply(function () {
                                     ngModelCtrl.$setViewValue(value?"":date);
                                });

                        });


                    }
                });
            });
        }
    }
});

我的日期选择器应该根据复选框工作，理想的目标是在取消选中复选框时根本不触发datepicker。

感谢

Answer 1

我使用ng-readonly

而不是ng-disabled

<input type="text" jqdatepicker  ng-disabled="!formData.gtdata.ch" ng-model="formData.gtdata.dt1"/>

app.directive('jqdatepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {
                $(function(){
                    element.datepicker({
                        dateFormat:'mm/dd/yy',
                        onSelect:function (date) {
                            scope.$apply(function () {
                                 ngModelCtrl.$setViewValue(date);
                            });

                        }
                    });
                });
        }
    }
});

Answer 2

<input type="text" jqdatepicker  ng-readonly ="!formData.gtdata.ch" ng-model="formData.gtdata.dt1"/>

    app.directive('jqdatepicker', function() {
        return {
            restrict: 'A',
            require : 'ngModel',
            link : function (scope, element, attrs, ngModelCtrl) {
                    $(function(){


          //disable datepicker
                if (attrs.ngReadonly || attrs.ngReadonly || attrs.Readonly)                 {
                    var str = attrs.ngReadonly || attrs.Readonly;
                    scope.$watch(str, function (newValue, oldValue) {
                        if (newValue) {
                            element.datepicker("option", "disabled", true);
                        } else {
                            element.datepicker("option", "disabled", false);
                        }
                    }, 0);

                }
                        element.datepicker({
                            dateFormat:'mm/dd/yy',
                            onSelect:function (date) {
                                scope.$apply(function () {
                                     ngModelCtrl.$setViewValue(date);
                                });

                            }
                        });
                    });
            }
        }
    });

Answer 3

这是我为Jquery UI datepicker所做的。如果datepicker ng-readonly 为true，则想法在 datepicker.beforeShow 内返回 false 。 HTML

<input type="text" jqdatepicker ng-model="SomeDate " ng-value="SomeDate | date:'dd/MM/yyyy'" ng-readonly="ro"/>

的js

app.directive('jqdatepicker', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                ngReadonly: '=',
            },
            link: function (scope, element, attrs, ctrl) {
                element.datepicker({
                    onSelect: function (date) {
                        ctrl.$setViewValue(date);
                        ctrl.$render();
                        scope.$apply();
                    },
                    beforeShow: function () {
                        var canShow = !scope.ngReadonly;
                        return canShow;
                    },
                });
            }
        };
    });

Jquery ui datapicker with readonly in Angular

3 个答案: