There seems to be a lot of complexity in the question at hand, but I'll do my best to provide assistance.
A. Handling Background Check API Calls
It appears that the user will initiate a "background check" request, triggering an AJAX call to the server. Based on your description, the response may not be immediate and could take some time to process.
My suggestion would be to implement a polling mechanism where the client side consistently checks with the server at intervals to see if the response is ready. Because direct server-to-client pushing isn't standardized yet, you'd need to save the background check result in the database and prompt the client to check for its readiness.
To achieve this, consider adding a directive to a prominent page element like the header. This directive can make periodic AJAX requests using Angular's $timeout and $http services to monitor the status of the background check. For persisting user information such as the requested background check and their ID, utilization of cookies (e.g., ngCookies) could prove beneficial.
B. Approach towards Popups and Modals in Angular
For handling popups or modals, my go-to technique involves attaching a full-screen <div> to the body element with fixed positioning and a high z-index.
>I have personally found it advantageous to create a modal factory responsible for managing global modal functionalities. While there are likely various open-source solutions available, I haven't delved into exploring them extensively.
Here's a basic outline of a modal factory setup:
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() {
// Handle any errors here
});
};
modalFactory.close = function(){
modalFactory.modal.remove();
modalFactory.open = false;
};
return modalFactory;
}])
Subsequently, you can incorporate and implement the modal factory within another directive by injecting it as a dependency:
app.directive('openSomeModal', ['modalFactory', function($modal){
return {
link: function($scope, $element){
$element.on('click', function(){
$modal.create($scope, document.body, 'path/to/template.html');
});
}
};
}]);