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

Question

我正在开发一个 Angular 1 网络应用程序，我想实现一个弹出窗口，在用户浏览该应用程序时对地址进行背景检查。

用户点击一个图标，弹出窗口打开，用户输入一些凭据，后台检查开始，弹出窗口消失。

只要后台检查完成并且服务器提供结果，弹出窗口就会打开 - 无论用户浏览应用程序的哪个页面 - 并提供结果。

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

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

Answer 1

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

一个。背景调查 API 电话

听起来用户要请求 "background check"，这将向服务器发出 AJAX 调用。我从你的问题中了解到，响应不会立即返回，而是需要几秒钟或几分钟。

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

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

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

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

Angular JS Pop over on every page of the application

javascript

angularjs

api

popover