我试图仅在不在整个主体上的div上应用md-dialog,这样我就可以在打开md对话框时在标题div中使用文本框。
示例:HTML
<body>
<div id="first_div">
<input type="text">
</div>
<div>
<div id="second_div">
<md-content>
<md-button ng-click="showDialog($event)">Launch Dialog</md-button>
</md-content>
</div>
</div>
</body>
控制器:
function showDialog($event) {
var parentEl = angular.element(document.querySelector('md-content'));
alert = $mdDialog.alert({
parent: parentEl,
targetEvent: parentEl,
template:
'<md-dialog aria-label="Sample Dialog">' +
' <md-content>'+
' </md-list>'+
' </md-content>' +
' <div class="md-actions">' +
' <md-button ng-click="ctrl.closeDialog()">' +
' Close Greeting' +
' </md-button>' +
' </div>' +
'</md-dialog>',
locals: {
closeDialog: $scope.closeDialog
},
bindToController: true,
controllerAs: 'ctrl',
controller: 'DialogController'
});
从上面的例子中我想使first_div独立于md-dialog。 只有second_div应该显示对话框。 因此,当向用户显示对话框时,用户应该能够在第一个div中输入详细信息。
检查CodePen以获取更多信息 Code Pen Link
答案 0 :(得分:5)
要在特定div上方放置对话框,您必须提供parent和targetEvent:
$scope.showAlert = function(ev) {
$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.querySelector('#second_div')))
.clickOutsideToClose(true)
.title('This is an alert title')
.content('You can specify some description text in here.')
.ariaLabel('Alert Dialog Demo')
.ok('Got it!')
.targetEvent(ev)
);
};
之后,为了使您的输入可用,您必须应用&#34; z-index&#34;包含您输入的div。
CSS
#first_div{
z-index:1000;
}