Create a new instance of img every ng-repeat

Question

I want to create an instance of the the image plugin called darkroomjs, I am not sure what is the correct directive to use.

it seems that ng-bind is not the correct directive.

<div ng-repeat="(key, contents_extended_data) in moderation.contents">
       <img src="" id='target_photo_[[contents_extended_data.reference]]' ng-bind="setDarkroom([[contents_extended_data.reference]])">
</div>

$scope.setDarkroom = function (reference) {
    new Darkroom('#target_photo_' + reference, {
        // Size options
        minWidth: 100,
        minHeight: 100,
        maxWidth: 350,
        maxHeight: 400,
        ratio: 4/3,
        backgroundColor: '#F0F8FF',

        // Plugins options
        plugins: {
            save: false,
            crop: {
                quickCropKey: 67, //key "c"
                //minHeight: 50,
                //minWidth: 50,
                //ratio: 4/3
            }
        },

        // Post initialize script
        initialize: function() {
            var cropPlugin = this.plugins.crop;
            cropPlugin.requireFocus();
        }
    });
};

Thanks in advance!

Answer 1

I would make my own directive

I don't have anything handy, but try this:

angular.module('app').directive('darkroom', function() {
    return {
        restrict: 'A',
        scope: {},
        link: function(scope, elem, attrs) {

            new Darkroom('#'+attrs.id, {
                // Size options
                minWidth: 100,
                minHeight: 100,
                maxWidth: 350,
                maxHeight: 400,
                ratio: 4/3,
                backgroundColor: '#F0F8FF',

                // Plugins options
                plugins: {
                    save: false,
                    crop: {
                       quickCropKey: 67, //key "c"
                       //minHeight: 50,
                        //minWidth: 50,
                      //ratio: 4/3
                    }
                },

                // Post initialize script
                initialize: function() {
                    var cropPlugin = this.plugins.crop;
                    cropPlugin.requireFocus();
                }
            });
        }
    }
});

in the img tag:

<img darkroom src="" id='target_photo_[[contents_extended_data.reference]]'>

To pass different options per img you use the directive scope:

return {
    restrict: 'A',
    scope: {darkroom: '='},
    link: function(scope, elem, attrs) {
        new Darkroom(id, scope.darkroom)
    }...

Then you pass the options here:

<img darkroom="options" src="" id='target_photo_[[contents_extended_data.reference]]'>

In the controller:

$scope.options = {
                // Size options
                minWidth: 100,
                minHeight: 100,
                maxWidth: 350,
                maxHeight: 400,
                ratio: 4/3,
                backgroundColor: '#F0F8FF',

                // Plugins options
                plugins: {
                    save: false,
                    crop: {
                       quickCropKey: 67, //key "c"
                       //minHeight: 50,
                        //minWidth: 50,
                      //ratio: 4/3
                    }
                },

                // Post initialize script
                initialize: function() {
                    var cropPlugin = this.plugins.crop;
                    cropPlugin.requireFocus();
                }
            }