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

时间:2015-07-17 21:20:55

标签: html css angularjs angular-material

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

1 个答案:

答案 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;
}