Angularjs Photo Album

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 d

Solution 1:

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