在Angular材質中以編程方式打開md-datepicker

Question

單擊單個元素時，我試圖從控制器中打開MD日期選擇器 ，但它不起作用，我使用的是Angular Material > 1.0.4的最新版本

我試圖$ inject $ mdDatePicker，但它說找不到模塊。

MyController.$inject = [ '$mdDatePicker' ];

我也深入研究了最后的文檔，但找不到與此相關的任何內容

Answer 1

我設法通過擴展指令破解了這個添加的功能：

.directive('mdDatepickerAutoopen', function ($timeout) {
  return {
    restrict: 'A',
    require: 'mdDatepicker',
    link: function (scope, element, attributes, DatePickerCtrl) {
      element.find('input').on('click', function (e) {
        $timeout(DatePickerCtrl.openCalendarPane.bind(DatePickerCtrl, e));
      });
    }
  };
})

<md-datepicker md-datepicker-autoopen>

對於將來的兼容性，我會格外小心，因為它取決於內部實現細節而不是任何公共API。 話雖如此，這可能是一個盡可能平和的技巧。

Answer 2

如果您只需要對話框本身而不需要日期字段，這是另一種方法。

將datepicker添加到指令模板，但將其隱藏：

<md-datepicker id="datepicker"
               ng-model="selectedDate"
               ng-change="dateChanged()"
               style="position: absolute; visibility: hidden;">
</md-datepicker>

通過以編程方式單擊按鈕將其打開。 選擇日期后， dateChanged函數將啟動，您可以對日期進行任何操作。

(function () {
    'use strict';

    angular.module("app").directive("someDirective", someDirective);

    someDirective.$inject = ["$timeout"];

    function someDirective($timeout) {
        return {
            templateUrl: 'app/directives/someDirective.html',
            restrict: 'EA',
            scope: {},
            link: function(scope, element) {
                scope.openDatePicker = function () {
                    $timeout(function() {
                        element.find("#datepicker button")[0].click();
                    }, 0);
                };

                scope.dateChanged = function () {
                    // Do something with scope.selectedDate
                };
            }
        };
    }
})();