私はAngular 1 Webアプリケーションで作業しており、ユーザーがアプリケーションをナビゲートしている間、アドレスの背景チェックを行うポップオーバーを実装したいと考えています。Angular JSアプリケーションのすべてのページでポップする
ユーザーがアイコンをクリックすると、ポップアップが開き、ユーザーがいくつかの資格情報を入力し、ポップオーバーが消えている間にバックグラウンドチェックが開始されます。
バックグラウンドチェックが完了し、サーバーが結果を配信すると、ユーザーがナビゲートするアプリケーションのページに関係なく、ポップオーバーが開き、結果が配信されます。
Angular 1にこのようなロジックを実装するにはどうすればよいでしょうか？ これはコンポーネントとして実行する必要がありますか？ コードはどのように見えますか？
任意のヒントやヘルプは非常に感謝してあり、この質問で起こって多くのですが、私はお手伝いします
を歓迎しています。
A.バックグラウンドチェックのAPI呼び出しユーザーがサーバーへのAJAX呼び出しを行います「バックグラウンドチェック」を、要求するために起こっているようですね
。私はあなたの質問から、その応答はすぐに戻ってくるのではなく、むしろ数秒または数分かかることを理解しています。
私のアプローチは、応答が準備完了しているかどうかを確認するために数秒ごとにサーバーをポーリングすることです。サーバーからクライアントへの応答（まだ）を「プッシュ」する標準的な方法はないので、クライアント側からサーバー側にこれを行う必要があります。したがって、バックグラウンドチェックの結果をデータベースに保存し、クライアントが準備ができているかどうかを確認するのを待っています。
私は、ヘッダのようないくつかのグローバルなページ要素にディレクティブを置いていました。このディレクティブは、AJAX要求をX秒ごとに送信し、バックグラウンドチェックが準備完了であるかどうかを確認します。これには角度の$timeoutと$httpサービスを使用します。ユーザーがバックグラウンドチェックを要求したかどうか、ユーザーIDが何であるかを追跡するために、Cookieを使用できます。私は前にngCookiesを使用しています。
B.ポップアップとモーダル
ポップアップまたはモーダルへの私の基本的なアプローチは、本体要素にフルスクリーン<div>を添付fixed位置に設定し、それに高いz-indexを与えることです。
私は、グローバルなモーダルロジックを追跡するためのモーダルファクトリを作ることが有用であることを発見しました。私は実際には実験していませんが、そこにはおそらく多くのオープンソースオプションもあります。
ここに私の基本的なモーダル工場です：
app.factory('modalFactory', [ '$templateRequest', '$sce', '$compile', function($templateRequest, $sce, $compile) {
var modalFactory = {
open: false,
modal: undefined
};
modalFactory.create = function($scope, parent, templateUrl){
$templateRequest(templateUrl).then(function(html) {
modalFactory.modal = angular.element(html);
modalFactory.open = true;
parent.append(modalFactory.modal);
$compile(modalFactory.modal)($scope);
}, function() {
// An error has occurred
});
};
modalFactory.close = function(){
modalFactory.modal.remove();
modalFactory.open = false;
};
return modalFactory;
}])
その後、あなたは依存関係としてそれを注入し、このような別のディレクティブからそれを使用することができます。
app.directive('openSomeModal', ['modalFactory', function($modal){
return {
link: function($scope, $element){
$element.on('click', function(){
$modal.create($scope, document.body, 'path/to/template.html');
});
}
};
}]);
あなたが何かをしたことがありますか？ –