在站点模板中使用 ngStorage 值答案

【问题标题】：use ngStorage values in the template of site在站点模板中使用 ngStorage 值
【发布时间】：2017-04-22 03:08:57
【问题描述】：

我有一个网站使用ngStorage 保存购物车数据，直到结帐，然后将其存储在数据库中。当使用 vm.$storage = $localStorage;在我的控制器中，我可以轻松访问 index.html 部分中页面部分的购物车信息，但我希望能够访问和显示来自嵌套在我网站标题中的 ngStorage 的信息。

我尝试将 ng-controller="SiteController" 添加到我的 li 标签中，但仍然没有任何东西可以这样显示。

如何使用 ngStorage 获取 localStorage 以显示在我网站的模板 (index.html) 中？

我的 index.html 文件设置如下：

<html ng-app="myApp">
<body>
// a bunch of code to show my other navigation
// code to show my shopping cart at a glance
    <li class="quick-cart">
        <a href="#">
        <span class="badge badge-aqua btn-xs badge-corner">
             {{vm.$storage.cart.items.length}}
        </span>
        <i class="fa fa-shopping-cart"></i> 
        </a>
        <div class="quick-cart-box">
            <h4>Shop Cart</h4>
        <div class="quick-cart-wrapper">
           <a href="#"><!-- cart item -->
              <h6>Item Name</h6>
              <small>$12.34</small>
           </a><!-- /cart item -->

            <!-- cart no items example -->
            <!--<a class="text-center" href="#"><h6>0 ITEMS ON YOUR CART</h6></a>-->
        </div>
        <!-- quick cart footer -->
        <div class="quick-cart-footer clearfix">
        <a href="shop-cart.html" class="btn btn-primary btn-xs pull-right">VIEW CART</a>
        <span class="pull-left"><strong>TOTAL:</strong> $54.39</span>
        </div>
        <!-- /quick cart footer -->
        </div>
    </li>
//other code between the header and controller content
<div ng-view></div> //the CONTENT section controlled by each controller
//other code to finish the page

我的 site-controller.js 代码是：

/* global angular */ angular.module('myApp')
    .controller('SiteController', SiteController);


function SiteController($route, $routeParams, AuthFactory, jwtHelper, $window, $localStorage, $sessionStorage) {
    var vm = this;
    vm.$storage = $localStorage;
    vm.$storage.cart = vm.$storage.cart;
    console.log(vm.$storage.cart);
}

【问题讨论】：

标签： angularjs ng-storage

【解决方案1】：

由于您在控制器中使用controllerAs 语法，因此您需要在ng-controller 中使用as alias

ng-controller="SiteController as vm"

这定义了您已经在视图中使用的vm：

{{vm.$storage.cart.items.length}}

【讨论】：