使用 ui-router 在不同视图之间保持状态

Question

从购物车控制器视图返回后，我在维护主控制器视图中选择的项目数量的状态时遇到问题。例如，在主控制器视图中添加了 2 个项目后，它将在购物车控制器视图中反映为 2 个项目，但是当我返回主控制器视图时，它会显示好像主控制器视图中没有添加任何项目控制器视图（状态消失），即使购物车控制器视图仍会显示 2 个项目。在视图之间向后和第四次导航时，我需要在两个视图中保持数量的状态。有谁知道我缺少什么允许两个视图之间的持久性？ Plunker 代码工作正常，只有在我遇到问题的实际 Web 应用程序中的视图之间导航时。谁知道如何解决这个问题，提前谢谢！

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