在Angular JS中處理模態的最簡單方法是什么？

Question

問題：如何在Angular JS控制器中管理一堆模態？

我把它們放在我的視圖的底部，並使用http://angular-ui.github.io/bootstrap/#/modal，但我最終得到了大型的html模板（有效），但感覺效率低下。

我嘗試過的：

• 來自UI-Bootstrap的$ dialog（痛苦的對接）
• 存儲在模板中的模式通過ng-include包含使用UI-Bootstrap的模態
• 模態放在我的視圖底部的控制器<<當前正在工作

這感覺就像我錯過了什么。 有什么指針嗎？

編輯：

我做了很多搜索並找到了一個腳本然后升級了一下：

• 你的模態是外部模板
• 它們也在您單擊按鈕的范圍內
• 3種不同（確認，消息，加載模板）

https://github.com/clouddueling/angularjs-modals

更新

我已經回復了這個問題： http ： //clouddueling.github.io/angular-common/

Answer 1

正如rGil所說的那樣，使用一個指令，你自己而不是UI-Bootstrap，如果它似乎太復雜了。 你的所有模態都會相似，或多或少。 您只需要一個模板和2-3個范圍變量來填充模態。 然后，您可以傳遞參數以打開和關閉模態，並提供更多功能。 你包含的越多，指令就越大。

第二種選擇是使用這些模態創建單獨的HTML部分，然后使用ngInclude將它們放在視圖中。 如果您的模態不同，但在多個頁面上經常重復使用，這將節省大量時間。 這方面的缺點是你仍需要打開和關閉它。 Angular的方法是編寫一個指令來處理切換，如果這就是你需要的全部內容。 簡單的方法是編寫一個小jQuery並打開點擊或其他任何模式。

老實說，這歸結為你的舒適程度。 jQuery會破壞你的代碼嗎？ 不，但它不是“Angular Way”。 使用jQuery，我可以在3-4行代碼中編寫模式切換。 這樣做Angular Way是一個指令和十幾行代碼。 但Angular方式具有將來編寫標記的好處，不再需要代碼。 如果我只有一個模態，我可以在jQuery中完成。 如果我有多個模態，就像你的情況一樣，我可能會花時間學習指令，然后想出一個有效的方法。