創建可重複使用的模態對象/模板系統

我們正在使用Angular 1.2重寫應用程序，並試圖確定傳統方法將用於創建可重用對話框。創建可重複使用的模態對象/模板系統

我們的應用程序有幾個包含窗體的「模態」窗口。他們從我們的應用程序中的多個地方打開並且是獨立的。

一個非常簡單的例子是：

var userDialog = new app.Dialogs.EditUser({ 
    user_id: 1, 
    save: function(){ 
    // callback stuff 
    } 
}); 
userDialog.show();

我不能確定如何最好地在角度處理這個問題。起初，我想到使它成爲一種服務，但這將有實際的形式等模板

我想過使用一個路線，所以我可以立即有一個控制器/模板組合，但我需要這個內容打開在當前頁面上，沒有任何iframe。

對於一個指令來說它似乎太複雜了，因爲它會控制它在dom中的位置（作爲一種模式，涵蓋所有內容），並且會有一些API代碼讓我們獲取/設置一些數據/選項，顯示/關閉它等

什麼是正確的建立這樣的可重用項目的角度方式？

來源

2015-04-03 helion3

可以看看UI的引導模式是如何實現的：https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js – reptilicus 2015-04-03 17:11:06

我有，但那些都是假設你已經在你的頁面上有佔位符元素的指令。在這種情況下，我想以編程方式創建一個實例並顯示它，我不希望頁面上的現有元素能夠工作。 – helion3 2015-04-03 17:12:26

你*可以*編程方式創建/實例化bootstrap-ui模態，並使用解析來傳遞你需要在模態中顯示的任何數據。 – reptilicus 2015-04-03 19:04:41

您可以通過用戶界面，引導啓發（或使用它）

文檔：https://angular-ui.github.io/bootstrap/#/modal

例如：http://plnkr.co/edit/?p=preview

創建一個模式窗口：

var modalInstance = $modal.open({ 
    templateUrl: 'myModalContent.html', 
    controller: 'ModalInstanceCtrl', 
    size: size, 
    resolve: { 
    items: function() { 
     return $scope.items; 
    } 
    } 
});

決心有相同意思就像在路由器中 - 指定控制器本地的依賴關係。

modalInstance.result是一個承諾。我認爲回調是一個更好的解決方案（例如，您可以將結果納入承諾鏈）。

modalInstance.result.then(function (selectedItem) { 
    $scope.selected = selectedItem; 
}, function() { 
    $log.info('Modal dismissed at: ' + new Date()); 
});

來源

2015-04-04 06:11:24 milanlempera

創建可重複使用的模態對象/模板系統

回答

相關問題