0

I capture some photos with the camera (Phonegap) and save the image/url in an array. To display the image i would like to add something like this (image will be shown in a table):

<!-- language: lang-html -->
<div class='ui-block-b'><img src=" + value + "></div>";

So i know i need a directive for this. My problem is to understand how to react when a new image/item will be added to the array so that i can display it.

Should i watch the array?

<!-- language: lang-js -->
angular.module('mydirectives').directive("ngImage", function ($compile) {
    return {
        template: "<div class='ui-block-b'><img src=" + {{images.image}} + "></div>",
        scope: {
        images:'='
    }
        link: function (scope, elm) {           
        scope.$watch(images, function (value) {

            // ??????
        });
        }
    };
    });
2
  • Add ng-repeat on the ui-block-b element? Jun 18, 2013 at 19:43
  • I think a directive would be better in case of different ui-block elements (ui-block-a, ui-block-b)...what do you think? And i have the possibility to add further "html" ...
    – DehMotth
    Jun 18, 2013 at 19:51

1 Answer 1

1

Do you need a directive? You can just do it with built in directives:

<div data-ng-repeat="item in images" class="ui-block-b"><img data-ng-src="item.image"></div>

ngRepeat watches images. You just need to images.push({image: 'newUrl', imageType: 'A'}). In addition, if you're just conditionally adding classes then you can just do something like:

<div data-ng-repeat="item in images" data-ng-class="{'ui-block-b': item.imageType == 'B', 'ui-block-a': item.imageType == 'A'}"><img data-ng-src="item".image></div>

And if you still want to do it with your own directive, then what you want is to watch a collection $scope.$watchCollection which is probably a bit complex. You can also try watching just the length property of the collection.

1
  • Noogen - thanks, this was a very good idea! But there is a mistake: img data-ng-src="item".image --> "item.image" OR? --> "{{item.image}}" ... The last one did it for me ...
    – DehMotth
    Jun 19, 2013 at 8:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.