HTML redirect to AngularJS controller with parameters

Question

I inherited a mess. And I need a quick fix for some code that needs to be completely rewritten - but not enough time to do a complete rewrite yet.

Orig developer created an index.js file that has all kinds of global functions used all through an AngularJS/Ionic project. Quite often I am finding AngularJS functions in specific controllers actually passing $scope/$q out to the standard JS functions in the index.js file - its a mess.

One of these global functions is window.FirebasePlugin.onNotificationOpen - which is watching for any inbound pushNotification/messages. The original developer was simply using an "alert" for inbound messages with a data payload. We are now trying to redirect those messages to open up in proper popover or modal windows that belong in the controller in two specific pages.

So the question is, in the global watch JS function, how can I direct the 'data/payload' to a controller to process in a proper $scope?

I have modified the .state to accept parameters - and then all the subsequent code is in place to pass the $stateParams into specific controllers:

  .state('tab.clubs', {
      cache: true,
      url: '/clubs',
      views: {
        'tab-clubs': {
          templateUrl: 'templates/tab-clubs.html',
          controller: 'ClubCtrl',
          params: {
            'pushAction' : 0,
            'pushCode' : 'default'
          }
        }
      }
    })

The problem I am having is trying to figure out how to pass URL data from standard JS into the AngularJS .state

The global JS function:

  window.FirebasePlugin.onNotificationOpen(function(payload) {
    // if there is a payload it will be in payload object
    if (payload.action == 1) {
       window.location("/clubs/", payload) ;  // process message in ClubCtrl
    } else if (payload.action == 2) {
       window.location("/map/", payload) ; // process message in MapCtrl
    }
  }, function(error) {
      console.error(error);
  }) ;

But this method fails.

Uncaught TypeError: window.location is not a function

georgeawg
– georgeawg

2019-08-02 22:42:58 +00:00
Commented Aug 2, 2019 at 22:42 — georgeawg
– georgeawg, Commented Aug 2, 2019 at 22:42

ug_ · Accepted Answer · 2019-08-02 23:53:06Z

0

If your not going to use angulars router to navigate to the page you will need to declare the params in the URL somehow. You can use path params by doing something like /clubs/:pushAction/:pushCode or url params with something like /clubs?pushAction&pushCode

Example:

.state('tab.clubs', {
      cache: true,
      url: '/clubs/:pushAction/:pushCode',
      views: {
        'tab-clubs': {
          templateUrl: 'templates/tab-clubs.html',
          controller: 'ClubCtrl',
          params: {
            'pushAction' : 0,
            'pushCode' : 'default'
          }
        }
      }
    })

Then navigate it with

location.href = `/clubs/${payload.action}/${payload.code}`

Additionally if you have alot of unknown params you could also pass in the whole payload as base64 encoded json. I wouldnt recommend this but it is... a solution

.state('tab.clubs', {
      cache: true,
      url: '/clubs?state',
      views: {
        'tab-clubs': {
          templateUrl: 'templates/tab-clubs.html',
          controller: 'ClubCtrl',
          params: {
            'state' : 0,
          }
        }
      }
    })

window.location(`/clubs?state=${btoa(JSON.stringify(payload))}`

Then in your controller reverse that operation

class ClubCtrl {
    ...
    // parses the state out of the state params and gives you the full payload
    parseState($stateParams) {
        return JSON.parse(atob($stateParams.state));
    }
    ...
}

It would give you all the payload, but its pretty gross

edited Aug 2, 2019 at 23:53

answered Aug 2, 2019 at 22:29

ug_

11.5k2 gold badges38 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

georgeawg Over a year ago

Uncaught TypeError: window.location is not a function

Collectives™ on Stack Overflow

HTML redirect to AngularJS controller with parameters

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related