使用ui-router在不同视图之间保持状态 [英] Persisting state between different views using ui-router

问题描述

从购物车控制器视图返回后，我在维护在主控制器视图中选择的项目数量状态时遇到问题.例如，在主控制器"视图中添加了2个项目后，它将在购物车控制器"视图中反映为2个项目，但是当我返回到主控制器"视图时，它将显示好像没有在主控制器中添加任何项目.控制器视图(状态消失)，即使购物车控制器视图仍将显示2个项目.在视图之间来回导航和第四视图时，我需要数量的状态在两个视图中均保持不变.有谁知道我想念的东西允许两个视图之间的持久性?Plunker代码可以正常工作，只有在遇到实际问题的实际Web应用程序中的视图之间导航时才可以.任何知道如何解决此问题的人，请先谢谢您！

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

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

推荐答案

您可以通过$ rootscope或使用$ localstorage保留值.我在以下代码中使用了$ localstorage.在使用$ localstorage之前，请使用ng-storage cdn&然后在两个控制器中注入$ localstorage.当然可以，对您有帮助.

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

这篇关于使用ui-router在不同视图之间保持状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！