Getting undefined when using target '_blank' with ui-router

Question

Hi I'm having the below issue. Below is my html page

<div class="content" ng-controller="DataController">
    <table class="table table-striped" id="show" ng-if="datalist.length>0">
        <thead>
          <th>State</th>
          <th>District</th>
          <th>Non-DND's</th>
        </thead>
        <tbody>
          <tr dir-paginate="data in datalist| filter:search|orderBy:sortKey:reverse|itemsPerPage:10" style="cursor:pointer;">
             <td>{{data.state}}</td>
             <td>{{data.district}}</td>
             <td><a ng-click="getnre(data.nondnd,data.dnd,data.land,data.email)" ui-sref="numsemailsdata" target="_blank">{{data.nondnd.length}}</a></td>
          </tr>
        </tbody>
    </table>
    <dir-pagination-controls max-size="10" direction-links="true" boundary-links="true" style="float:right" ng-if="datalist.length>0">
    </dir-pagination-controls>
 </div>

Below is the code in my controller.js

app.controller("DataController", function($scope, DataService) {
  $scope.datalist=DataService.getData();
  $scope.getnre=function(ndnd,dnd,land,email) {
    $scope.numsem = {
        ndnds : ndnd,
        dnds : dnd,
        lands : land,
        emails : email
    }
  }
});

Below is the numsdetails.html

<div class="content" ng-controller="DataController">
    <table class="table table-striped">
        <thead>
          <th>Non-DND's</th>
        </thead>
        <tbody>
           <tr ng-repeat="ndnd in numsems.ndnds">
              <td>{{ndnd}}</td>
           </tr>
        </tbody>
      </table>
 </div>

Here I'm displaying the non-dnd's count in my first html page and I need to display the non-dnd's in new tab which is numsemails.html When I'm trying to bind the data to numsemails.html, I'm getting the data as undefined even I'm binding the data from same controller.

Please help me with a solution.

@Doug E Fresh $stateProvider.state("numsemailsdata", { url:"/NumsEmails", templateUrl:"partials/numsemails.html" }); — Sindhu Garimella, Sep 06 '17 at 05:48

score 2 · Accepted Answer · answered Sep 06 '17 at 14:50

The reason you are getting undefined for numsems is because when you open a new page (blank) you create an entire new instance of your app. It is like loading the page for the first time. Think of it as a totally different browser instance, because that is what it is. You can pass a parameter using stateparams, this gets passed in the url, however you are trying to pass an entire object so it becomes a bit more difficult.

There are multiple solutions to your problem. You can pass some data in the url, or you can use localstorage, $window, or cookies to store the data. I'm sure there are also other solutions. Choose one of these methods to hand your data properly and we can help you with it.

This issue has been discussed in other threads.

ui-router: open state in new tab with target=“_blank” with object params

Thanks for your response. Finally I used the localStorage. Also tried using stateParams. But I didn't get expected. Looking for a better solution than using localStorage. — Sindhu Garimella, Sep 07 '17 at 11:26

score 0 · Answer 2 · answered Sep 05 '17 at 12:28

Your controller code is wrong, you're missing brackets and braces:

app.controller("DataController", function($scope) {
  $scope.datalist = DataService.getData();
  $scope.getnre = function(ndnd,dnd,land,email) {
    $scope.numsem = {
      ndnds : ndnd,
      dnds : dnd,
      lands : land,
      emails : email
    };
  }
});

Getting undefined when using target '_blank' with ui-router

2 Answers2