Javascript 如何使用decorator覆盖md datepicker功能

我正在使用md datepicker元素的$provide.decorator覆盖md datepicker功能

我想在这里实现的是，我想将输入字段（md datepicker的子节点）标记为只读，这样用户就不能手动输入日期值并强制从md datepicker中选择日期

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

• TypeError:无法读取null的属性“$setTouched”
• TypeError:无法读取null的属性“$setViewValue”

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

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

(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;

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

---

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

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