Home > other >  How to call a method in the child window in Angular JS
How to call a method in the child window in Angular JS

Time:08-02

My angular JS application has a view button. When clicking on the view button, it will call method and that method changes the content in the same page. Now I have a request that when clicking on the view button, it has to open in a new tab and display the contents.

Previous code:

HTML: <md-button ng-click="ctrl.ViewClick(item)">View</md-button>

Controller:

  vm.ViewClick = function(item) {   
     // The browser URL is same but it is a new page with the new contents.
     // Calls a angular js service and loads the contents
    
  }

Now, I need to call that function in new browser tab.

I made the following changes but didn't worked. Can you please help me on this.

HTML: <md-button ng-click="ctrl.NewTabClick(item)">View</md-button>

Controller:

       vm.newTabClick = function(item){
          $Window.open($location.absURL(), 'blank');
          // How do I call  vm.ViewClick function after opening the new browser window?
          };

This is the old angular JS. Thanks for helping on this.

CodePudding user response:

On workaround you can do in this case is, While opening the page pass query parameter in the URL.

vm.newTabClick = function(item){
   // Add `viewLink=true` query parameter with true value 
   $Window.open($location.absURL()   '&viewLink=true', 'blank');
   // Store item in sessionStorage     
   window.sessionStorage.setItem('item', JSON.stringify(item));
}

And then from the component where you want to call the parameter. You can write below code on $onInit lifecycle hook.

vm.$onInit = function () {
   // Inject $routeParams in dependency areay
   const storedItem = sessionStorage.getItem('item')
   if ($routeParams.viewLink == 'true' && storedItem && storedItem != 'null') {
      vm.viewLink(JSON.parse(storedItem));
   }
}
  • Related