Question

我正在尝试在点击单个元素时从我的控制器打开 MD日期选择器，但它不起作用，我正在使用Angular Material的最新版本＆gt; 1.0.4

我试图$注入 $ 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
                };
            }
        };
    }
})();

以编程方式打开Angular Material中的md-datepicker

2 个答案: