时间戳

首页 > 解决方案 > 输入及其标签显示在弹出 mdDialog 顶部的问题

angularjs - 输入及其标签显示在弹出 mdDialog 顶部的问题

问题描述

我正在使用 mdDialog 从我的页面创建一个弹出窗口，但原始页面中的一些内容显示在 mdDialog 的顶部

这是我的弹出窗口如何呈现的链接：

在此处输入图像描述

看起来标签和所述输入标签的标签都呈现在我的 md-dialog 之上

我如何生成弹出窗口：

$scope.openTutorial = function(ev){
 $mdDialog.show({
  controller: TutorialController,
  templateUrl: 'partials/tutorial.html',
  parent: angular.element(document.body),
  targetEvent: ev,
  clickOutsideToClose:true,
  fullscreen: $scope.customFullscreen
 });
};

function TutorialController($scope, $mdDialog, DashFactory) {
 $scope.hide = function() {
 $mdDialog.hide();
 };
}

预期结果将是不属于此弹出窗口的任何内容隐藏在弹出窗口下，直到它被关闭

在此处输入图像描述

标签： angularjsangularjs-material

解决方案

我解决了我的问题，我认为可以解决我的问题，O 将 ng-hide 添加到我麻烦的 HTML 项目中，然后扩展我的 mdDialog 以具有 onShowing 和 onRemoving 功能以翻转一些标志以隐藏项目

$scope.openTutorial = function(ev){
  $mdDialog.show({
    onShowing: function(){
      $scope.tutorialOpen = true;
    },
    controller: TutorialController,
    templateUrl: 'partials/tutorial.html',
    parent: angular.element(document.body),
    targetEvent: ev,
    clickOutsideToClose:true,
    fullscreen: $scope.customFullscreen,
    onRemoving: function(){
      $scope.tutorialOpen = false;
    }
  });
};

虽然这可以完成工作，但我确实相信 mdDialog 没有按设计工作，因为默认情况下它应该位于这些项目之上。

推荐阅读