Angularjs相冊

Question

您好我正在製作一個帶有angularjs的photoalbum應用程序，它可以從我的服務器獲取base-64編碼的圖像字符串並將它們解碼爲圖像。

問題是我的angularjs應用程序似乎無法解碼base64字符串。在我的模板上，它顯示沒有圖像找到圖標。我檢查了base64字符串，當我將其直接嵌入到模板中時，它很好：

<p><img src="data:image/jpeg;charset=utf-8;base64, /9j/4AAQSkZJRgABAQEBLA...etc.</p>' 

圖像會顯示出來。不過，我需要從我的客戶指令（下面的代碼）中的服務中獲取相冊數據。

任何人都可以幫助解決這個問題嗎？

這裏是我的代碼：

directive.js

.directive('photoalbumsDisplay', ['$compile', 'myprofileService', function($compile,  
myprofileService) { 
    return { 
     restrict: 'E', 
     link: function(scope, element, attrs) { 
      myprofileService.retrieve_albums().then(function(data) { 
       var html = []; 
       for (var p = 0; p < data.length; p++) { 
        //album photos array 
        var pic = data[p]; 

        html += '<p><img src="data:image/jpeg;base64, ' + pic + '"/></p>'; 
       } 

       element.replaceWith(html) 


      }); 
     } 
    } 
}]); 

template.html

<div data-ng-controller="photogalleryCtr" data-ng-init="init()"> 

    <photoalbums-display></photoalbums-display> 

</div> 

Answer 1

您可以嘗試使用NG-SRC，而不是src和獲取照片從範圍你的指令，而不是讓你的指令內：

http://docs.angularjs.org/api/ng.directive:ngSrc

然後你就可以在你的標記做到這一點：

<photoalbums-display="photos"></photoalbums-display> 

，改變你的指令是這樣的：

app.directive('photoalbumsDisplay', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      photos: '=photos' 
     }, 
     template: '<p ng-repeat="photo in photos">' + 
      '<img ng-src="data:image/jpeg;base64, {{photo.data}}"></p>' 
    }; 
}); 

並添加到您的控制器，配備必要的注射：

$scope.photos = []; 
myprofileService.retrieve_albums().then(function(data) { 
    var i, length; 
    for (i = 0, length = data.length; i < length; i += 1) { 
     $scope.photos.push({ 
      data: data[i] 
     }); 
    } 
});