頂層模態對話框，涵蓋整個角度應用
[英]top-level modal dialog to cover whole angular application
問題描述
我想使用模式（來自angular-ui-bootstrap項目）來實現登錄對話框。 它應該覆蓋整個應用程序，在后台覆蓋它，並且一旦AngularJS服務將變量設置為false時，應該能夠引發它。
我不想使用路由到登錄頁面，因為我想在應用程序中保留輸入值。
您如何看待變量並正確觸發模式對話框的open（）函數？
編輯：我正在使用Thrift與服務器進行通信，所以在我的情況下，觀看$ http狀態代碼通常並不容易...
3 個解決方案
解決方案1
0 已采納 2013-12-10 07:55:26
有幾種方法可以做到這一點。 由於模式本身就是服務，因此您實際上可以直接從服務中直接調用open。 或者，該服務可以發布事件，某些事件可以監聽並觸發登錄頁面。
如果您真的想監視特定的變量（因為它可能會在不同的地方更改），則可以在$ rootScope上設置一個$ watch，然后調用open。
解決方案2
0 2013-12-10 07:55:33
您可以使用angular-ui-bootstrap模塊並使用其$ modal服務顯示登錄模式，而無需重定向到任何其他頁面。
您可以在angular-app演示應用程序安全服務中找到相同的實現-
https://github.com/angular-app/angular-app/blob/master/client/src/common/security/security.js
解決方案3
0 2013-12-10 08:39:27
我建議您為此使用事件。 訣竅是，假設您的后端讓請求失敗並且正在發送正確的訪問拒絕狀態，則要監視服務調用是否失敗（403）。 標志$rootScope.isLoggingIn用於防止鏈中有多個調用時出現多個LoginDialogs。
未經測試的代碼是我的主意，因此請對其進行測試並更正，以防出現錯誤/錯別字
<html ng-app="myApp">
</html>
angular.module('myApp', ['ui.bootstrap.modal'])
.run(function($rootScope, $modal) {
$rootScope.isLoggingIn = false;
$rootScope.$on('showLoginDialogEvent', function (e, evtArgs) {
$rootScope.isLoggingIn = true;
$modal.open({
templateUrl: 'views/loginView.html',
controller: 'LoginDialogController'})
.result.then(function(){
$rootScope.isLoggingIn = false;
});
}
});
angular.module('requestInterceptor', [])
.config(function ($httpProvider) {
$httpProvider.interceptors.push('RequestInterceptor');
})
.factory('RequestInterceptor', function ($q, $rootScope) {
return {
'request': function (config) {
return config || $q.when(config);
},
'requestError': function(rejection) {
return $q.reject(rejection);
},
'response': function(response) {
return response || $q.when(response);
},
'responseError': function(rejection) {
if(!$rootScope.isLoggingIn && rejection.status === 403)
$rootScope.$broadcast('showLoginDialogEvent');
return $q.reject(rejection);
}
}
}
如何在angular-js中創建“頂級”控制器？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.