CODEWITHSUNDEEP
javascriptangularjsionic-frameworkparameter-passing
rolinger
rolinger

Reputation: 3060

HTML redirect to AngularJS controller with parameters

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.

Upvotes: 0

Views: 50

Answers (1)

ug_
ug_

Reputation: 11440

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

Upvotes: 0

Related Questions