Navigate back to the homepage

AngularJS & Popup Windows

Bulkan Evcimen
April 14th, 2014 · 1 min read

Photo by Sergi Ferrete on Unsplash

Popup windows are extremely annoying hence most modern browsers block them, agreeably so. That being said one use of popup windows is when doing OAuth. Showing the OAuth authorization dialog in a popup window as not to confuse the user.

If there is a better or different way please comment below.

All the code can be found at angular-popup.

Here is how I solved it using a simple express 4 application and the accompanying AngularJS.

The express code is very simple it just creates two routes. The root/index route renders the view to bootstrap the angular application.

The angular app has one default route / with its controller set to PopupCtrl. In the template popup.html using ng-click we call the function bound on the $scope called showPopup. This is the code for PopupCtrl;

Read the inline comments;

1popupApp.controller('PopupCtrl', ['$scope', '$window', '$interval', function PopupCtrl($scope, $window, $interval) {
2 'use strict';
3
4 // assign the current $scope to $window so that the popup window can access it
5 $window.$scope = $scope;
6
7
8 $scope.showPopup = function showPopup(){
9 // center the popup window
10 var left = screen.width/2 - 200
11 , top = screen.height/2 - 250
12 , popup = $window.open('/popup', '', "top=" + top + ",left=" + left + ",width=400,height=500")
13 , interval = 1000;
14
15 // create an ever increasing interval to check a certain global value getting assigned in the popup
16 var i = $interval(function(){
17 interval += 500;
18 try {
19
20 // value is the user_id returned from paypal
21 if (popup.value){
22 $interval.cancel(i);
23 popup.close();
24 }
25 } catch(e){
26 console.error(e);
27 }
28 }, interval);
29
30 }
31}]);

We tell the popup to load up the /popup URL which our express app will render the server side jade template.

1extends layout
2
3 block content
4 <h1>I'm a popup</h1>
5
6 script.
7 setTimeout(function(){
8 window.opener.$scope.says = 'teapot';
9 window.value = true;
10 }, 2000);

The template above is simple enough. All it does is after two seconds assing to window.value to indicate to the $interval that the popup has done something important. The popup also assigns a value to window.opener.$scope which is the $scope that was assigned in PopupCtrl.

As we have used ng-model in the default routes template a we will see the text teapot appear in the text input.

Hope this makes sense.

More articles from Bulkan

HTML5 Manifest File & Nginx

Photo by Clément H on Unsplash Ive been developing a HTML5 game using the LimeJS framework. As I am targetting iPhone and iPod Touches I…

May 9th, 2013 · 1 min read

Using Custom Events With LimeJS

Photo by Jason Dent on Unsplash LimeJS is an open source JavaScript HTML5 game creation framework built using Google Closure. In this…

April 29th, 2013 · 2 min read
© 2007–2020 Bulkan
Link to $https://twitter.com/bulkanevcimenLink to $https://github.com/bulkanLink to $https://instagram.com/bulkan.evcimen