Question

我有主页，其中包含2个图像的列表，我已经给出了控制器和Html代码。每次主页图像从后端加载我想在本地缓存图像以避免每次http请求和每周一次或10天一旦我想从后端检查后端图像是否已更改，我需要更新此缓存图像。我已经按照一些例子但我无法解决这个问题，因为我是这项技术的新手，有人帮助我前进

.controller('TestCtrl', [
    '$scope', '$http', '$location', '$window', '$ionicLoading',
    function($scope, $http, $location, $window, $ionicLoading) {
	       
        $scope.find = function() {
	     $http.get('****').success(function(data, status, headers, config, response) {
                
                $scope.image1 = data[0].Images1;
                $scope.image2 = data[1].Images2;
                
            })
        }
           
    }
])
//console i am getting image1:http://res.cloudinary.com/dl34322/image/upload/q_58/v1437810617/store1.png image2:http://res.cloudinary.com/dl34322/image/upload/q_58/v1437810617/store2.png

<ion-view  title="Home" data-ng-controller="TestCtrl" data-ng-init="find()">	
<ion-content>

<div class="list card">
  <div class="item item-image">
     <img src="{{image1}}">
  </div>
</div>
<div class="list card">
  <div class="item item-image">
     <img src="{{image2}}" >
  </div>
</div>
</ion-content> 
</ion-view >

Answer 1

尝试在ng-src元素中使用src代替<img>，如下所示：

 <ion-view  title="Home" data-ng-controller="TestCtrl" data-ng-init="find()">   
    <ion-content>

    <div class="list card">
      <div class="item item-image">
         <img ng-src="{{image1}}">
      </div>
    </div>
    <div class="list card">
      <div class="item item-image">
         <img ng-src="{{image2}}" >
      </div>
    </div>
    </ion-content> 
    </ion-view >

Answer 2

您可以使用$ImageCacheFactory缓存图像一次，并在需要再次加载时从缓存中加载图像。完整文档here

如何使用离子角移动应用程序缓存图像？

2 个答案: