AngularJS中的彈出疊加（模態）？

Question

我正在使用AngularJS來構建我的攝影網站。

我想創建一個覆蓋對話框，每當用戶點擊圖像。

NG-視圖內：

<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) 
     } 

我的問題是，它的點擊時的圖像被刪除，我無法弄清楚如何改變疊加元素的顯示樣式（DIV #overlay），它位於index.html中。

Answer 1

來自AngularUI團隊的UI Bootstrap包含一個Modal指令。它還有許多其他方便的模塊。