Javascript Angular JS在应用程序的每个页面上都会弹出

我正在开发Angular 1 web应用程序，希望实现一个popover，在用户浏览应用程序时对地址进行背景检查

用户单击图标，弹出窗口打开，用户输入一些凭证，背景检查开始，弹出窗口消失

一旦背景检查完成，服务器交付结果，弹出窗口就会打开——不管用户在应用程序的哪个页面上导航——并交付结果

在Angular 1中实现这种逻辑的最佳方式是什么？ 这应该作为一个组件来完成吗？ 代码会是什么样子

---

非常感谢并欢迎您提供任何提示和帮助

在这个问题上有很多问题，但我会尽力提供帮助

A.后台检查API调用

听起来用户将请求“背景检查”，这将向服务器发出AJAX调用。我从你的问题中了解到，答复不会立即回复，而是需要几秒钟或几分钟

我的方法是每隔几秒钟轮询服务器，查看响应是否就绪。您需要从客户端到服务器端执行此操作，因为目前还没有将响应从服务器“推送”到客户端的标准方法。因此，您将后台检查的结果保存在数据库中，并等待客户端检查其是否准备就绪

我会在一些全局页面元素上添加一个指令，比如页眉。该指令每X秒发送一个AJAX请求，以查看后台检查是否准备就绪。为此使用angular的

$timeout

和

$http

服务。为了跟踪用户是否请求背景检查以及他们的用户ID是什么，您可以使用cookies。我以前用过，很喜欢

B.角度的弹出窗口和情态动词

我处理弹出窗口或模态的基本方法是将一个全屏

附加到body元素，将其设置为

fixed

定位，并给它一个高

z索引

我发现创建一个模态工厂来跟踪全局模态逻辑非常有用。可能还有很多开源选项，尽管我还没有真正尝试过

以下是我的基本模型工厂：

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');
            });
        }
    };
}]);

这个问题有很多问题，但我会尽力帮助你

A.后台检查API调用

听起来用户将请求“背景检查”，这将向服务器发出AJAX调用。我从你的问题中了解到，答复不会立即回复，而是需要几秒钟或几分钟

我的方法是每隔几秒钟轮询服务器，查看响应是否就绪。您需要从客户端到服务器端执行此操作，因为目前还没有将响应从服务器“推送”到客户端的标准方法。因此，您将后台检查的结果保存在数据库中，并等待客户端检查其是否准备就绪

我会在一些全局页面元素上添加一个指令，比如页眉。该指令每X秒发送一个AJAX请求，以查看后台检查是否准备就绪。为此使用angular的
$timeout
和
$http
服务。为了跟踪用户是否请求背景检查以及他们的用户ID是什么，您可以使用cookies。我以前用过，很喜欢

B.角度的弹出窗口和情态动词

我处理弹出窗口或模态的基本方法是将一个全屏
附加到body元素，将其设置为
fixed
定位，并给它一个高
z索引

我发现创建一个模态工厂来跟踪全局模态逻辑非常有用。可能还有很多开源选项，尽管我还没有真正尝试过

以下是我的基本模型工厂：

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');
            });
        }
    };
}]);

你试过什么吗？你试过什么吗？