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

我正在使用Angular 1 web应用程序，并希望实现一个popover，在用户浏览应用程序时执行背景检查以查找地址。Angular JS在应用程序的每个页面上弹出

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

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

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

任何提示和帮助是非常赞赏，并欢迎

来源

2016-11-09 Die Web Agenten

你已经尝试了些什么呢？ –

有很多在这个问题上怎么回事，但我会尽力帮助。

A.背景检查API调用

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

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

我会把一个指令放在一些像页眉这样的全局页面元素上。该指令每隔X秒发送一次AJAX请求以查看背景检查是否准备就绪。为此，请使用angular的$timeout和$http服务。为了跟踪用户是否请求了背景检查以及他们的用户ID是什么，可以使用cookie。我之前使用过ngCookies，并且很喜欢它。

B.弹出式广告和情态动词在角

我的基本途径弹出窗口或情态动词是一个全屏幕<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'); 
      }); 
     } 
    }; 
}]);

来源

2016-11-09 15:21:22 Stafree

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

回答

相关问题