[英]Open md-datepicker in Angular Material Programmatically
I'm trying to open a MD Date Picker from my Controller when click on a single element but it's not working, I'm using the last version of Angular Material > 1.0.4
单击单个元素时,我试图从控制器中打开MD日期选择器 ,但它不起作用,我使用的是Angular Material > 1.0.4
的最新版本
I've tried to $inject the $mdDatePicker but it says that couldn't find the module. 我试图$ inject $ mdDatePicker,但它说找不到模块。
MyController.$inject = [ '$mdDatePicker' ];
I've also digged into the last documentation but couldn't find anything related to this 我也深入研究了最后的文档,但找不到与此相关的任何内容
I managed to hack this added functionality in with an extending directive: 我设法通过扩展指令破解了这个添加的功能:
.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>
I'd be careful with this regarding future compatibility, since it depends on internal implementation details instead of any public API. 对于将来的兼容性,我会格外小心,因为它取决于内部实现细节而不是任何公共API。 Having said that, this is probably as gentle a hack as possible. 话虽如此,这可能是一个尽可能平和的技巧。
Here's another hacky way to do it if you only need the dialog itself and not the date field. 如果您只需要对话框本身而不需要日期字段,这是另一种方法。
Add the datepicker to a directive template, but hide it: 将datepicker添加到指令模板,但将其隐藏:
<md-datepicker id="datepicker"
ng-model="selectedDate"
ng-change="dateChanged()"
style="position: absolute; visibility: hidden;">
</md-datepicker>
Open it by clicking the button programmatically. 通过以编程方式单击按钮将其打开。 When a date is selected, the dateChanged
function will fire and you can do what you need to do with the date. 选择日期后, 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
};
}
};
}
})();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.