应用程序每个页面上的 Angularjs Popover [关闭]

Question

我正在开发一个 Angular 1 Web 应用程序，并希望在用户浏览应用程序时实现一个弹出框，对地址进行背景检查。

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

一旦后台检查完成并且服务器交付结果，弹出窗口就会打开 - 无论用户在应用程序的哪个页面上导航 - 并交付结果。

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

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

Answer 1

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

A.背景检查 API 调用

听起来用户将请求“背景检查”，这将对服务器进行 AJAX 调用。我从您的问题中了解到，响应不会立即返回，而是需要几秒钟或几分钟。

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

我会在一些全局页面元素上放置一个指令，比如标题。该指令每 X 秒发送一次 AJAX 请求，以查看后台检查是否已准备好。为此使用 Angular 的 $timeout 和 $http 服务。要跟踪用户是否请求进行背景调查以及他们的用户 ID 是什么，您可以使用 cookie。我以前用过ngCookies，很喜欢。

B. Angular 中的弹出窗口和模态框

我对弹出窗口或模态框的基本做法是在 body 元素上附加一个全屏<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');
            });
        }
    };
}]);