javascript - 以最優雅的方式顯示彈出視窗

我有這個 AngularJS 應用程式。一切運作都很好。

現在當特定條件成為真時，我需要顯示不同的彈出視窗，我在想最好的做法是什麼。

目前我正在評估兩個選擇，但我完全對其他選擇持開放態度。

選項 1

我可以為彈出視窗創建新的 HTML 元素，並直接從控制器將其附加到 DOM。

這將破壞 MVC 設計模式。我對這個解決方案不滿意。

選項 2

我總是可以將所有彈出窗口的代碼插入到靜態 HTML 文件中。然後，使用 ngShow，我可以隱藏或顯示正確的彈出窗口。

這個選項其實並不具備可擴展性。

所以我相當確定一定有更好的方法可以達到我想要的結果。

答案＃1

根據我迄今對 AngularJS 模態窗的經驗，我相信最優雅的方法是使用一個專用服務，向其提供一個局部（HTML）模板以在模態窗中顯示。

當我們思考這個問題時，模態框有點像 AngularJS 的路由，但只是顯示在模態彈出窗中。

AngularUI bootstrap 專案 (http://angular-ui.github.com/bootstrap/) 有一個很棒的 $modal 服務（在版本 0.6.0 之前稱為 $dialog），它是一個用來將 partial 的內容顯示為模態彈出視窗的服務實作。

答案＃2

很好笑，因為我自己也在學 Angular，並且在 YouTube 上觀看他們頻道的一些影片。講者在這段影片中提到了你遇到的問題 https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681，大約在 28:30 分鐘的地方。

這歸結為將那段特定的程式碼放在服務中，而不是控制器中。

我的猜測是向 DOM 中注入新的彈出元素並分開處理它們，而不是顯示和隱藏相同的元素。這樣你就可以有多個彈出窗口。

整個影片看起來也非常有趣 :-)

答案＃3

建立一個 'popup' 指令並將其應用於彈出內容的容器
在指令中，將內容包裹在一個絕對定位的 div 中，並在其下方放置遮罩 div。
可以在指令內根據需要移動 DOM 樹中的這兩個 div。指令中可以包含任何 UI 代碼，包括將彈出窗口置中屏幕的代碼。
建立並綁定一個布林旗標到控制器。這個旗標將控制可見性。
創建綁定到確定/取消等功能的作用域變數。

編輯以添加高層次範例（非功能性）

<div id='popup1-content' popup='showPopup1'>
  ....
  ....
</div>


<div id='popup2-content' popup='showPopup2'>
  ....
  ....
</div>



.directive('popup', function() {
  var p = {
      link : function(scope, iElement, iAttrs){
           //code to wrap the div (iElement) with a abs pos div (parentDiv)
          // code to add a mask layer div behind 
          // if the parent is already there, then skip adding it again.
         //use jquery ui to make it dragable etc.
          scope.watch(showPopup, function(newVal, oldVal){
               if(newVal === true){
                   $(parentDiv).show();
                 } 
              else{
                 $(parentDiv).hide();
                }
          });
      }


   }
  return p;
});

答案＃4

請參閱 http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/，了解使用 Angular 創建模態對話框的簡單方法，並且不需要使用 Bootstrap

編輯：我之後一直在使用 http://likeastore.github.io/ngDialog 的 ng-dialog，它很靈活，且沒有任何依賴。