Сохраняющееся состояние между различными видами с использованием ui-router

Question

У меня возникают проблемы с сохранением состояния количества элементов, выбранного в представлении главного контроллера, после возврата из представления контроллера корзины. Например, после добавления количества 2 элементов в представлении главного контроллера он будет отображаться как 2 элемента в представлении контроллера корзины, однако, когда я вернусь к представлению главного контроллера, он будет отображаться так, как если бы никакие предметы не были добавлены в Main Просмотр контроллера (состояние исчезает), даже если в представлении контроллера корзины будет отображаться 2 элемента. Мне нужно, чтобы состояние количества сохранялось в обоих представлениях, при навигации назад и четвертом между видами. Кто-нибудь знает, что мне не хватает, что позволяет упорствовать между обоими представлениями? Код Plunker работает отлично, только при навигации между представлениями в моем реальном веб-приложении, где я сталкиваюсь с проблемой. Любой, кто знает, как это решить, заблаговременно!

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

Answer 1

Либо вы можете сохранить значение по $ rootscope или с помощью $ LocalStorage. Я использовал $ localstorage в приведенном ниже коде. перед использованием $ localstorage, используйте ng-storage cdn &, затем введите $ localstorage в обоих контроллерах. Конечно, это поможет вам.

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