AngularJS中的弹出式叠加(模态)

Question

我正在使用AngularJS来构建我的摄影网站。

我想在用户单击图像时创建一个叠加对话框。

在 NG-view 内：

<div class="masonry-brick" ng-repeat="item in SouthKorea">  
     <a href=""> <img ng-click="openOverlay($event)"  ng-src="{{item}}" >  </a>
</div>

在 index.html 中，加载了不同的 ng 视图。

<div id="overlay">  </div>

在控制器内部，我有这个功能

$scope.openOverlay = function (e,elem, $scope) {
            var image = angular.element(e.target);
            var overlay = angular.element('#overlay');
            overlay.append(image)
        }

我的问题是单击图像时会被删除，并且我无法弄清楚如何更改 index.html 内的叠加元素 （div#overlay） 的显示样式。

Answer 1

来自 AngularUI 团队的 UI Bootstrap 包含一个 Modal 指令。它还具有许多其他方便的模块。