Ways to trigger an AngularJS event from a popup?

Question

Ways to trigger an AngularJS event from a popup?

Situation: I am working on an AngularJS application that utilizes Google's authentication feature.

Depending on the specific resource, when Angular communicates with my backend, it may request an Oauth token. In such cases, Angular will display a popup (not a Bootstrap modal) containing the redirect URL.

Google will authenticate the user, seek permission, and then redirect them back to my application. There is a callback URL that will handle the 'code' and obtain the actual token. This callback URL is triggered within the popup.

Once the token is acquired, the popup should automatically close and inform Angular to retry the last request (now that the token is stored in the user's session)

Issue: How can a popup trigger an event in Angular?

It doesn't necessarily have to be $rootScope.$emit, but there should be a way to notify Angular.

I came across this solution, but it may not be suitable for Angular :(

javascript angularjs popup

Answer 1

Answer №1

If you are looking to implement localStorage events, you can refer to this helpful demo:

// To implement this functionality on the main page
$window.addEventListener('storage', function(event) { 
  if(event.key === 'login-notification') {
    // Notification received!
    // You can access the value using "event.newValue"
  }
}, false);

// Trigger the event by using setItem from the popup
$window.localStorage.setItem('login-notification', 'ayy');

Answer 2

If you are looking to implement localStorage events, you can refer to this helpful demo:

// To implement this functionality on the main page
$window.addEventListener('storage', function(event) { 
  if(event.key === 'login-notification') {
    // Notification received!
    // You can access the value using "event.newValue"
  }
}, false);

// Trigger the event by using setItem from the popup
$window.localStorage.setItem('login-notification', 'ayy');

Answer 3

Answer №2

Start by creating a new service.

app.service("customService", function(){
  return {
    set : function(key, value){
          this[key] = value;    
     },
     get : function (key){
        return this[key];
     }
  }
});

Now, you can easily set the token in the service within the app, making the value accessible throughout. You can also use $watch to monitor specific keys in the service and trigger actions based on the set value.

Answer 4

Start by creating a new service.

app.service("customService", function(){
  return {
    set : function(key, value){
          this[key] = value;    
     },
     get : function (key){
        return this[key];
     }
  }
});

Now, you can easily set the token in the service within the app, making the value accessible throughout. You can also use $watch to monitor specific keys in the service and trigger actions based on the set value.

Ways to trigger an AngularJS event from a popup?

Answer №1

Answer №2

Similar questions

Converting Numbers into Words with the power of HTML and JavaScript

Unable to create selected buttons in Vue.js

Angular-ui typeahead feature allows users to search through a predefined

Sending a JavaScript string to a PHP script from a Chrome extension content script

Displaying and hiding the Angular <object> element

I'm looking to validate an input tag in HTML5 using JQuery. Can anyone help clarify this process for me?

Use of absolute positioning resulted in the disappearance of the element

The issue of calling the child window function from the parent window upon clicking does not seem to be functioning properly on Safari and Chrome

Looking for the properties of the ServerResponse object in node.js - where can I locate them?

The footer is now accompanied by the <v-navigation-drawer> on the side

Is there a way to prevent the jsonPayload in stackdriver from automatically converting to a struct format?

Is it considered inefficient to import every single one of my web components using separate <script> tags?

Updating the parent component of a Vue router when closing nested routes

Adding QML code into a Jade file

Efficiently handle user authentication for various user types in express.js with the help of passport.js

Mandatory input Angularjs 1.2 and Bootstrap 3

Creating an if statement based on the currently chosen option

Flag a specific property on a directive scope as needing an update

What is the best way to dismiss the ant-design-vue select option when the mouse moves away?

Empty screen appears when "npm run serve" command is executed following the build process