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

Angular JS Pop over on every page of the application

本文关键字：JS 应用程序 Angular      更新时间：2023-09-26

我正在做一个Angular 1的web应用，想实现一个弹出窗口，当用户在应用中导航时，它会对地址进行背景检查。

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

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

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

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

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

。后台检查API调用

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

我的方法是每隔几秒钟轮询服务器，看看响应是否准备好了。您需要从客户端到服务器端执行此操作，因为(目前)还没有标准的方法将响应从服务器"推送"到客户端。因此，您正在将背景检查的结果保存在数据库中，并等待客户端检查它是否准备好。

我把一个指令在一些全局页面元素，如标题。该指令每隔X秒发送一个AJAX请求，查看背景检查是否准备好了。使用angular的$timeout和$http服务。为了跟踪用户是否请求了背景调查以及他们的用户ID是什么，您可以使用cookie。我以前用过ngCookies，我很喜欢它。

B。Angular中的弹出窗口和模态

我对弹出窗口或模态的基本方法是将全屏<div>附加到body元素，将其设置为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');
            });
        }
    };
}]);
相关文章：