Question

我使用$ provide.decorator为md-datepicker元素覆盖md-datepicker功能。

我想在这里实现的是我想标记输入字段（md-datepicker的子节点）应该只读标记，以便用户无法手动输入日期值并强制从md-datepicker中选择日期

输入字段获取readOnly属性，它变为只读。但是当我使用md-datepicker的日历选择日期时 - 它会给我以下错误 -

TypeError：无法读取属性＆＃39; $ setTouched＆＃39;为null
TypeError：无法读取属性＆＃39; $ setViewValue＆＃39;为null

指令装饰器运行后元素出了什么问题？请帮忙。

我的装饰师看起来像这样：

(function () {
'use strict';

angular.module('Application_Name').config(['$provide', function($provide) {

    $provide.decorator('mdDatepickerDirective', [
        '$delegate',

        /**
         * @function mdDatepickerDirective
         * @description decorates mdDatepickerDirective to extend functionality:
         *              - Mark input field as read-only so which will prevent user from typing date manually
         *                and should select from date-picker calender only.
         * @param {angular.Directive} $delegate
         * @returns {angular.Directive} $delegate
         */
        function mdDatePickerDecorator($delegate) {
            var directive = $delegate[0];
            var compile = directive.compile;

            directive.compile = function (tElement) {
                tElement.find("input").prop("readOnly", "true");
            };

            return $delegate;

        }
    ]);
}])})();

Answer 1

创建了一个新的指令来解决这个问题：

(function () {
'use strict';

angular.module('Application_Name').directive('mcReadOnly', readOnly);

function readOnly() {
    var directive = {
        restrict: 'A',
        link: link
    };

    return directive;

    function link(scope, element) {
        element.find("input")[0].setAttribute("readonly","true");
        element.find("input").bind('click', function(e){
            element.find("button")[0].click();
        });
    }
}})();

如何使用装饰器覆盖md-datepicker功能

1 个答案: