我有一个网站使用ngStorage来保存购物车数据,直到结帐,然后存储在数据库中。使用vm。$ storage = $ localStorage时;在我的控制器中,我可以轻松访问index.html部分页面部分的购物车信息,但我想能够访问和显示我网站标题中ngStorage的信息,该信息嵌套在里面。 / p>
我尝试过添加ng-controller =" SiteController"我的li标签,但仍然没有得到任何显示方式。
如何使用ngStorage在我的网站的模板(index.html)中显示localStorage?
我的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);
}
答案 0 :(得分:2)
由于您在控制器中使用controllerAs
语法,因此需要使用as alias
中的ng-controller
ng-controller="SiteController as vm"
这定义了您在视图中使用的vm
:
{{vm.$storage.cart.items.length}}