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

Question

我使用$ suffer.decorator的md-datepicker元素覆盖MD-datepicker功能。

我想在这里实现的目标是我要标记输入字段（MD-datepicker的子节点），应该标记为读取，以便用户无法手动输入日期值，也不能从MD-datepicker中选择日期。/p>

输入字段获取可读取属性，并且它变为可读性。但是，当我使用MD -datepicker的calender选择日期时 - 它给我以下错误 -

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

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