Persisting state between different views using ui-router

Question

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);
      }
    }
  });

Is main controller page & cart controller page are two different pages ? — Abhay
Hi @rroxysam. Yes both Main Controller View and Cart Controller View are 2 separate pages. Thanks. — user791134
please correct me, you have made a service named cardstorage & u update that one & then show data in both views for that service.Is it ? — Abhay
Yes that is correct. cartStorage is a Service using the Value recipe, in order to share updates between both controllers/views. — user791134

Abhay Abhay · Accepted Answer · 2016-06-11T08:35:04

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);
      }
    }
  });

Persisting state between different views using ui-router

1 Answers