Angular Ui-Router-Extras | 试图实现粘性状态，但不起作用

Question

Well, I have this plunkr trying to simulate my situation:

I have 3 tabs and the idea is that the user type a word on the textbox, and when click the button, an angular service returns an answer (result) from a DB according to the typed on the textbox (I have simulated this process with requesting data to a json file, so it is not important whatever you type, always will return the whole data) and populated a table in another view.

What's my goal? Well, I need to preserve every view intacted per tab. In other words, when the user click on a tab (changing the states) and returns to another, the data that was requested, could be there (and also what was typed on the search box).

EDIT:

I have an array containing my definitions:

var parentStates = [
      {state : 'tab1', url: '/tab1/', template: 'tab1.html', s: false, d: true},
      {state : 'tab2', url: '/tab2/', template: 'tab2.html', s: false, d: true},
      {state : 'tab3', url: '/tab3/', template: 'tab3.html', s: false, d: true},
      {state : 'tab1.table', url: '', template: 'table.html', s: true, d: false},
      {state : 'tab2.table', url: '', template: 'table.html', s: true, d: false},
      {state : 'tab3.table', url: '', template: 'table.html', s: true, d: false}
    ];

And I define my states dinamycally, in this way:

parentStates.forEach(function(childName){
        $stateProvider
          .state("home." + childName.state, {
            controller: "itemController", resolve: { $title: function() { return childName.state; } },
            url: childName.url,
            templateUrl: childName.template,
            sticky: childName.s,
            deepStateRedirect: childName.d
          })
      });

Applying only sticky to the states home.tab*.table . This works, but not as espected. For example, what I type on search box, dessapear when I change the tab. I need that the content from the 3 arrays (mentioned below) could bee keeped per tab. That's my issue.

I have 3 arrays:

$scope.Model.items;
$scope.Model.filteredlist;
$scope.Model.expenses;

and I use a function called $scope.clear_arrays to clear the data on the arrays (even on the $stateChangeSuccess ). I don't know if this is ok to get what I want.

I know I have to use the great angular-ui-router-extras (sticky states) library, but I don't know how to apply it in my case. I have tried with:

sticky: true,
deepStateRedirect: true,

but does not works. Some ideas, some help?

EDIT:

As the docs says, I need exactly this part:

... The states for a tab in the application does not get exited when switching to one of the other tabs. The user should be able to switch back and forth between tabs without any interruption in their workflow.

Answer 1

There are a few design decisions to keep in mind when using ui-router-extra's sticky states:

1. Use a named view for each state, and hide/show them as these states become active. This makes if you think about it... if we remove those views from the DOM entirely then the state of that part of your app is gone (think of a partially typed input box for example). Here's an example:

   <div ng-show="$state.includes('main.tab1')" ui-view="tab1"></div>

2. Use a shared controller for your tabs. Because of the nature of sticky states, in order to share a state, it's best (and thus far the only way I've found) to make this work. This step is quite simple, just don't assign a controller to your sub-states and you should be good to go.

Below is a simple state definition taking advantage of the steps described above, including a parent route, controller-less child, and sticky states:

$stateProvider
.state('main', {
  url: '/',
  controller: 'MainCtrl',
  controllerAs: 'main',
  templateUrl: 'state-main.html'
})
.state('main.tab1', {
  url: '/tab1',
  sticky: true,
  views: {
    tab1: {
      templateUrl: 'state-tab1.html',
    }
  }
})

Here is a very simplistic example using sticky states: http://plnkr.co/edit/SCHExh4DYKFd9Kq3UbaA

For your app, I applied the principles laid out above and removed the table sub-states as those were complicating things a bit. So to simplify I took the liberty to wrap the table in a directive and passed the data into it from the parent scope.

The usage of that directive became pretty simple (feel free to rename it more appropriately):

<table-list ng-if="Model.tab1.length > 0" list="Model.tab1" />

Keep in mind that Model.tab1 contains the array of elements for the tab1 state (remember shared controller).

Finally, here is your app working with sticky states: http://plnkr.co/edit/gLn19DMyKBTwZRMpv6Fo

I hope this helps :)