自定义弹出对话框毛刺

Question

我的页面上有这些“卡片”，基本上只是包含其中一些内容的div。单击卡时，会出现一个弹出对话框。弹出工作正常。然而，页面的其余部分被搞砸了，因为当单击一张卡时，我的页面主体元素（我认为）上会出现一个额外的滚动条，并且默认滚动条被禁用！此滚动条会导致页面上的所有元素调整大小以进行补偿，并且它们都会向左轻微移动。当我退出对话框时，额外的滚动条消失，默认的滚动条恢复正常，所有页面元素都返回到正常位置。除了只有一个问题：我的导航栏不再延长页面的长度！它结束了额外的滚动条，如果它还在那里。此外，当使用默认警报对话框（没有自定义弹出框模板）时，我没有遇到此问题。为什么会这样？我该如何解决？

代码 - 格式化与我的复制/粘贴有点混乱。

这是有问题的标签的html。它与带有指令的起始html页面绑定，并在单击相应的选项卡时显示。

<div class="row">
<div class="col-md-1"></div>
<div id="badges-div" class="col-md-10">
    <h3 class="tile-header">Your Badges</h3>
    <div class="badges-table">
        <div ng-repeat="badge in earnedBadges" class="table-badge-div" ng-click="showBadge($event, badge)">

            <img ng-src="images/{{badge.image}}" class="badge-card-image">
            <div class="badge-card-bottom">
                <p class="badge-card-title">{{badge.name}}</p>
            </div>
            <p class="badge-card-points"><b>{{badge.points}}</b></p>
            <p class="badge-card-date"><b>{{badge.earnedDate}}</b></p>
            <img src="images/all_white.png" class="badge-highlight-image">
        </div>
    </div>

    <div class="col-xs-1"></div>
</div>

以下是创建对话框的控制器：

app.controller("learningController", function($scope, $mdDialog) {
$scope.trackProgress = 38;
$scope.currentTrack = "Software Developer";
$scope.badgeIndex = null;
$scope.userName = "Isaac Way";
$scope.recentBadge = null;
$scope.completedCourses = testCompletedCourses();


$scope.earnedBadges = window.earnedBadges;

$scope.showBadge = function(ev, badge) {
    $mdDialog.show({
        controller: DialogController,
        templateUrl: "templates/badgeDialog.html",
        parent: angular.element(document.body),
        targetEvent: ev,
        clickOutsideToClose: true,
        fullscreen: false
    }); 
};

function DialogController($scope, $mdDialog) {
    $scope.hide = function() { $mdDialog.hide(); };
    $scope.cancel = function() { $mdDialog.cancel(); };
};

// Some irrelevant code here...

};

最后是对话框模板本身：

<md-dialog aria-label="Dialog">
    <div>divdivdivdivdiv</div>
</md-dialog>

下方弹出对话框时的样子 - 注意普通对话框旁边的无意义额外滚动条。