如何使用修飾器覆蓋md-datepicker功能

Question

我使用$ provide.decorator爲md-datepicker元素覆蓋了md-datepicker功能。

我想在這裏實現的是我想標記輸入字段（md-datepicker的子節點）應該標記爲只讀，以便用戶不能手動輸入日期值並強制從md-datepicker中選擇日期。

輸入字段獲取只讀屬性，它變爲只讀。但是當我選擇使用MD-日期選擇器的壓延機的日期 - 它給了我下面的錯誤 -

• 類型錯誤：無法讀取屬性空
• 類型錯誤的「$ setTouched」：無效的不能讀取屬性「$ 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(); 
     }); 
    } 
}})();