Question

我的应用程序中出现了一个问题，而且我真的不知道如何在这里作为简化版本进行复制，所以我问这个问题，以防有人对可能发生的事情有所了解。

我有一个SPA，可以在导航过程中加载不同的视图。在其中一个视图中，我单击屏幕中的一个元素，这将打开一个模态窗口。我正在使用bootstrap $ modal来做到这一点。问题是，当模态窗口出现时，其他所有内容都会从视图中消失。只保留SPA中视图外的元素。

有什么想法吗？我在控制台中没有错误。我猜测它与角度处理有关，也许模态窗口在视图之前处理并在窗口显示时停止？此外，如果我按下屏幕关闭窗口，一切都会回来。

编辑：我可以提供一个正常工作的plunker，因为模态窗口下面的图像不会消失，所以恐怕不是很有帮助。

angular.module('app', ['ngRoute', 'myApp'])

.config(['$routeProvider', 
    function($routeProvider) {
        $routeProvider.
            when('/index', {
                template: '<my-dir></my-dir>',
                controller: 'myCtrl'
            }).
          otherwise({
                template: '<my-dir></my-dir>',
                controller: 'myCtrl'
          });
}]);

angular.module('myApp', ['ui.bootstrap'])

.controller('myCtrl', ['$scope', function($scope) {

  $scope.actions = [
    {'x':50,'y':40,'time':'02:00','period':'1','name':'name1'},
    {'x':50,'y':60,'time':'02:00','period':'2','name':'name2'},
    {'x':50,'y':80,'time':'02:00','period':'3','name':'name3'}
  ]

}])

.directive("myDir", ['$compile', '$modal', function($compile, $modal){
  return {
    restrict: 'E',
    scope: true,
    replace: true,
    link: function (scope, element, iAttrs) { 

      for (var i = 0; i < scope.actions.length; i++) {
        var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            circle.setAttribute('cx', scope.actions[i].x);
            circle.setAttribute('cy', scope.actions[i].y);
            circle.setAttribute('r', 5);            
        circle.setAttribute('ng-click', 'open(' + i + ')');
        element.append(circle);
      }
      $compile(element)(scope);
    },
    controller: function($scope) {              
          $scope.open = function (idx) {                    
            var modalInstance = $modal.open({
          windowClass: 'center-modal',
          templateUrl: 'modalWindow.html',
          controller: 'myDirCtrl',
          resolve: {
                      action: function() {
                        return $scope.actions[idx];
                      }
          }
        });
        };              
        },
    template:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><image x="0" y="0" width="400" height="200" xlink:href="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"/></svg>'
  }
}])

.controller('myDirCtrl', function($scope, $modalInstance, action) {
        $scope.action = action;
});

Answer 1

你能提供一些代码如何使用$ modal吗？

我建议使用Angular-UI作为Bootstrap实现 https://angular-ui.github.io/bootstrap/

他们在Angular World中工作得更好。

希望这可以帮到你！

编辑：

尝试像这样定义你的模态：

self.sampleConstraint.constant = 20
self.view.layoutIfNeeded()

至少这适用于我的应用程序！

Answer 2

好的，我终于找到了问题。

我发现这个问题正在发生，因为我的应用程序中有一个.css文件。我已经为我的身体定义了一个高度，显然当打开模态窗口时，元素在体内创建，并用overflow: hidden标记其他所有内容。

我删除了html正文中的高度，一切都回来了。

Bootstrap $ modal窗口背景清除屏幕中的元素

2 个答案: