Question

我试图仅在不在整个主体上的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

Answer 1

要在特定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;
}

在不是全身的div上显示md-dialog

1 个答案: