Angularjs相册 [英] Angularjs photo album

问题描述

您好我正在做画册的应用程序与基础抓起-64连接codeD image字符串从我的服务器和去codeS他们进入图像angularjs。

问题是我的angularjs的应用程序似乎不能去code以base64字符串。在我的模板，它显示的图像没有找到图标。我检查了的base64字符串和其优良当我把它直接嵌入到像这样的模板：

 ＆LT; P＆GT;＆LT; IMG SRC =数据：图像/ JPEG;字符集= UTF-8;的base64，/9j/4AAQSkZJRgABAQEBLA...etc.</p> 
 

图片将会显示出来。不过，我需要我的客户指令（code以下）内抢从服务的画册数据。

任何人都可以帮助解决这个问题？

下面是我的code：

directive.js

  .directive（'photoalbumsDisplay'，['$编译，myprofileService'，函数（$编译，
 myprofileService）{
    返回{
        限制：'E'，
        链接：功能（范围，元素，ATTRS）{
            myprofileService.retrieve_albums（）。然后（功能（数据）{
                变种的html = [];
                为（变量p值= 0; P＆下; data.length，P ++）{
                    //相册中的照片阵列
                    VAR PIC =数据[P]。                    HTML + ='＆所述p为H.;＆下; IMG SRC =数据：图像/ JPEG;的base64，'+峰+/＆GT;＆下; / P＆GT;';
                }                element.replaceWith（HTML）
            }）;
        }
    }
}]）;
 

template.html

 ＆LT; D​​IV数据-NG-控制器=photogalleryCtr数据-NG-的init =的init（）＆GT;    ＆LT; photoalbums显示屏幕和GT;＆LT; / photoalbums显示屏幕和GT;＆LT; / DIV＆GT;
 

解决方案

您可以尝试使用NG-SRC，而不是src和获得的照片从你的指令，而不是范围让他们的指令里面的：

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

然后你就可以在你的标记做到这一点：

 ＆LT; photoalbums显示器=照片＆GT;＆LT; / photoalbums显示屏幕和GT;
 

和改变你的指令是这样的：

  app.directive（'photoalbumsDisplay'，函数（）{
    返回{
        限制：'E'，
        范围： {
            照片：'=照片
        }，
        模板：'＆LT; p NG重复=照片照片＆GT;' +
            '＆LT; IMG NG-SRC =数据：图像/ JPEG; BASE64，{{photo.data}}＆GT;＆LT; / P＆GT;'
    };
}）;
 

和添加到您的控制器，配备必要的注射：

  $ scope.photos = [];
myprofileService.retrieve_albums（）。然后（功能（数据）{
    VAR我，长度;
    对于（i = 0，长度= data.length; I＆LT;长度;我+ = 1）{
        $ scope.photos.push（{
            数据：数据[I]
        }）;
    }
}）;
 

Hi I'm making a photoalbum app with angularjs which grabs base-64 encoded image strings from my server and decodes them into images.

The problem is my angularjs app can't seem to decode the base64 strings. On my template it shows the no image found icon. I checked the base64 strings and its fine when I embed it straight to the template like this:

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

The image will show up. However I need to grab the photoalbum data from a service within my customer directive (code below).

Can anybody help with this problem?

Here is my code:

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>

解决方案

You might try using ng-src instead of src and getting photos from the scope in your directive instead of getting them inside your directive:

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

Then you can do this in your markup:

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

And change your directive like this:

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

And add this to your controller, with the necessary injections:

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

这篇关于Angularjs相册的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！