Persisting state between different views using ui-router

问题

I am having issues maintaining the state of the item quantity selected in the Main Controller View, after returning from the Cart Controller View. For example after adding a quantity of 2 items in the Main Controller View, it will reflect as 2 items in the Cart Controller View, however when I go back to the Main Controller View it will show as though no items have been added in the Main Controller View (state disappears), even though the Cart Controller View will still show 2 items. I need the state of the quantities to persist in both views, when navigating back and fourth between views. Does anyone have any idea what I am missing that allows for persistence between both views? The Plunker code works fine, it's only when navigating back between views in my actual web application where I encounter the problem. Anyone who knows how to resolve this, thank you in advance!

https://jsfiddle.net/156mjkqx/

HTML

<div ng-app="app">
  <div ng-controller="mainController as main">
    <h2>
  Main Controller View
  </h2>
    <div>
      <table>
        <tr>
          <td>Item</td>
          <td>Price</td>
          <td>Quantity</td>
          <td></td>
        </tr>
        <tr ng-repeat="item in main.items">
          <td>{{item.name}}</td>
          <td>{{item.price | currency}}</td>
          <td>
          <button ng-click="main.decreaseItemAmount(item)">
              -
            </button>
            {{item.quantity}}
            <button ng-click="main.increaseItemAmount(item)">
              +
            </button>
            <button ng-click="main.addToCart(item)">
              Add to Cart
            </button>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <div ng-controller="cartController as cart">
    <h2>
  Cart Controller View
  </h2>
    <div>
      <table>
        <tr>
          <td>Item</td>
          <td>Price</td>
          <td>Quantity</td>
          <td></td>
        </tr>
        <tr ng-repeat="item in cart.cartStorage.items">
          <td>{{item.name}}</td>
          <td>{{item.price | currency}}</td>
          <td>
            <button ng-click="cart.decreaseItemAmount(item)">
              -
            </button>
            {{item.quantity}}
            <button ng-click="cart.increaseItemAmount(item)">
              +
            </button>
            <button ng-click="cart.removeFromCart(item)">
              Remove from Cart
            </button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

JAVASCRIPT

angular.module('app', [])
  .value('cartStorage', {
    items: []
  })
  .controller('mainController', function(cartStorage) {
    var _this = this;
    _this.cartStorage = cartStorage;

    _this.items = [{
      name: 'Apple',
      price: .5,
      quantity: 1,
    }];

    _this.addToCart = function(item) {
      _this.cartStorage.items.push(item);
      item.addedToCart = true;
    }

    _this.increaseItemAmount = function(item) {
      item.quantity++;
      item.showAddToCart = true;
    }

    _this.decreaseItemAmount = function(item) {
      item.quantity--;
      if (item.quantity <= 0) {
        item.quantity = 0;
        item.addedToCart = false;
        item.showAddToCart = false;
        var itemIndex = _this.cartStorage.items.indexOf(item);
        if (itemIndex > -1) {
          _this.cartStorage.items.splice(itemIndex, 1);
        }
      } else {
        item.showAddToCart = true;
      }
    }
  })
  .controller('cartController', function(cartStorage) {
    var _this = this;
    _this.cartStorage = cartStorage;

    _this.increaseItemAmount = function(item) {
      item.quantity++;
    }

    _this.decreaseItemAmount = function(item) {
      item.quantity--;
      if (item.quantity <= 0) {
        item.quantity = 0;
        item.addedToCart = false;
        item.showAddToCart = false;
        var itemIndex = _this.cartStorage.items.indexOf(item);
        if (itemIndex > -1) {
          _this.cartStorage.items.splice(itemIndex, 1);
        }
      }
    }

    _this.removeFromCart = function(item) {
      item.quantity = 0;
      item.addedToCart = false;
      item.showAddToCart = false;
      var itemIndex = _this.cartStorage.items.indexOf(item);
      if (itemIndex > -1) {
        _this.cartStorage.items.splice(itemIndex, 1);
      }
    }
  });

回答1:

Either you can retain the value by $rootscope or using $localstorage. I have used $localstorage in the below code. before using $localstorage, use ng-storage cdn & then inject $localstorage in both the controller. Sure it will help you.

     angular.module('app', [])

    .controller('mainController', function($localStorage) {
    var _this = this;
    $localStorage.items = $localStorage.items || [];
    _this.cartStorage = $localStorage.items;

    _this.items = [{
      name: 'Apple',
      price: .5,
      quantity: 1,
    }];

    _this.addToCart = function(item) {
      $localStorage.items.push(item);
      item.addedToCart = true;
    }

    _this.increaseItemAmount = function(item) {
      item.quantity++;
      item.showAddToCart = true;
    }

    _this.decreaseItemAmount = function(item) {
      item.quantity--;
      if (item.quantity <= 0) {
        item.quantity = 0;
        item.addedToCart = false;
        item.showAddToCart = false;
        var itemIndex = $localStorage.items.indexOf(item);
        if (itemIndex > -1) {
          $localStorage.items.splice(itemIndex, 1);
        }
      } else {
        item.showAddToCart = true;
      }
    }
  })
  .controller('cartController', function(localStorage) {
    var _this = this;
     _this.cartStorage = $localStorage.items || [];

    _this.increaseItemAmount = function(item) {
      item.quantity++;
    }

    _this.decreaseItemAmount = function(item) {
      item.quantity--;
      if (item.quantity <= 0) {
        item.quantity = 0;
        item.addedToCart = false;
        item.showAddToCart = false;
        var itemIndex = $localStorage.items.indexOf(item);
        if (itemIndex > -1) {
          $localStorage.items.splice(itemIndex, 1);
        }
      }
    }

    _this.removeFromCart = function(item) {
      item.quantity = 0;
      item.addedToCart = false;
      item.showAddToCart = false;
      var itemIndex = $localStorage.items.indexOf(item);
      if (itemIndex > -1) {
       $localStorage.items.splice(itemIndex, 1);
      }
    }
  });

来源：https://stackoverflow.com/questions/37760497/persisting-state-between-different-views-using-ui-router