Создайте новый экземпляр img каждый ng-repeat

Question

Я хочу создать экземпляр плагина изображения, называемого darkroomjs, я не уверен, что это правильная директива для использования.

Кажется, что ng-bind не является правильной директивой.

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

Заранее благодарен!

Answer 1

Я хотел бы сделать мои собственные директивы

Я ничего не имею под рукой, но попробуйте это:

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

в IMG тег:

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

Чтобы передать различные опции для каждого img вы используете область действия директивы:

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

Затем вы проходите варианты здесь:

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

В контроллере:

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