指令不适用于ng-repeat

Question

我正在使用指令ng-img-crop通过ng-repeat多次上传照片，如果我列出视图html硬编码说4次它工作正常，但当我把它甚至硬编码或动态并尝试通过ng-repeat循环它它不起作用，我认为它与范围有关，但我不确定。

下面的代码显示由于控制器而导致视图仅被循环一次，但它仍然无法正常运行或给我任何错误

查看HTML

    <section ng-repeat="scenario in scenarios">
    <div class="one">
    <p>Upload Photo</p>
    <div >
    <label class="custom-radio" for="fileInput1" >
      <img src="img/upload-icon.svg" width="96" height="69">
    </label>
    <input type="file" id="fileInput1" />
  </div>
    <div class="cropArea1"  >
      <img-crop image="myImage1" area-type="rectangle" result-image="myCroppedImage1" result-image-size="400"></img-crop>
    </div>
    <button ng-click="clear2()" >Delete</button>
    <button ng-click="initCrop = true">Save</button>
  </div>
  <div class="two">
    <p>Select Postion</p>
   <img  src="img/1x1.png" width="96" height="69">
  </div>
  <div><img ng-src="myImage1" /></div>
  <div><img ng-src="myCroppedImage1"/></div>
  </section>

指令

  crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub',      function($timeout, CropHost, CropPubSub) {
  return {
  restrict: 'E',
scope: {
  image: '=',
  resultImage: '=',

  changeOnFly: '=',
  areaType: '@',
  areaMinSize: '=',
  resultImageSize: '=',
  resultImageFormat: '@',
  resultImageQuality: '=',

  onChange: '&',
  onLoadBegin: '&',
  onLoadDone: '&',
  onLoadError: '&'
},
template: '<canvas></canvas>',
controller: 'ScenarioController',
// controller: ['$scope', function($scope) {
//   $scope.events = new CropPubSub();
//
// }],
link: function(scope, element/*, attrs*/) {
  // Init Events Manager
  scope.events = new CropPubSub();
  var events = scope.events;

  // Init Crop Host
  var cropHost=new CropHost(element.find('canvas'), {}, events);

  // Store Result Image to check if it's changed
  var storedResultImage;

  var updateResultImage=function(scope) {

    var resultImage=cropHost.getResultImageDataURI();
    if(storedResultImage!==resultImage) {
      storedResultImage=resultImage;
      if(angular.isDefined(scope.resultImage)) {
        scope.resultImage=resultImage;
      }
      scope.onChange({$dataURI: scope.resultImage});
    }
  };

  // Wrapper to safely exec functions within $apply on a running $digest cycle
  var fnSafeApply=function(fn) {
    return function(){
      $timeout(function(){
        scope.$apply(function(scope){
          fn(scope);
        });
      });
    };
  };

  // Setup CropHost Event Handlers
  events
    .on('load-start', fnSafeApply(function(scope){
      scope.onLoadBegin({});
        console.log("Load Start");
    }))
    .on('load-done', fnSafeApply(function(scope){
      scope.onLoadDone({});
      console.log("Load Done");

    }))
    .on('load-error', fnSafeApply(function(scope){
      scope.onLoadError({});
      console.log("Error Loading");
    }))
    .on('area-move area-resize', fnSafeApply(function(scope){
      if(!!scope.changeOnFly) {
        updateResultImage(scope);
      }
    }))
    .on('area-move-end area-resize-end image-updated', fnSafeApply(function(scope){
      updateResultImage(scope);
    }));

  // Sync CropHost with Directive's options
  scope.$watch('image',function(){
    cropHost.setNewImageSource(scope.image);
  });
  scope.$watch('areaType',function(){
    cropHost.setAreaType(scope.areaType);
    updateResultImage(scope);
  });
  scope.$watch('areaMinSize',function(){
    cropHost.setAreaMinSize(scope.areaMinSize);
    updateResultImage(scope);
  });
  scope.$watch('resultImageSize',function(){
    cropHost.setResultImageSize(scope.resultImageSize);
    updateResultImage(scope);
  });
  scope.$watch('resultImageFormat',function(){
    cropHost.setResultImageFormat(scope.resultImageFormat);
    updateResultImage(scope);
  });
  scope.$watch('resultImageQuality',function(){
    cropHost.setResultImageQuality(scope.resultImageQuality);
    updateResultImage(scope);
  });

  // Update CropHost dimensions when the directive element is resized
  scope.$watch(
    function () {
      return [element[0].clientWidth, element[0].clientHeight];
    },
    function (value) {
      cropHost.setMaxDimensions(value[0],value[1]);
      updateResultImage(scope);
    },
    true
  );

  // Destroy CropHost Instance when the directive is destroying
  scope.$on('$destroy', function(){
      cropHost.destroy();
  });
}
 };

控制器

$scope.scenarios = [
                                 {id: '1', imagePosition: 'img/1x1.png', minWidth: '874', minHeight: '2185', imageSize: ''},
                                 {id: '2', imagePosition: 'img/1x2.png', minWidth: '874', minHeight: '2185'}
                            ];

     var scenarios = $scope.scenarios;
                         angular.forEach(scenarios, function(scenario) {

                             $scope.finalImageResults = [];


                             // Start Dynamic Scope Variables
                                var id = scenario.id;
                                var myImage = 'myImage';
                                var myCroppedImage = 'myCroppedImage';
                                $scope['myImage'+id] = '';
                                $scope['myCroppedImage'+id] = '';
                              $scope['imagePosition'+id] = scenario.imagePosition;
                                //End Dynamic Scope Variables

                                $scope['clear'+id] = function() {
                                    $scope['imageLoaded'+id] = false;
                                    delete $scope['myImage'+id];
                                    delete $scope['myCroppedImage'+id];
                                    $scope['imagePosition'+id] =    scenario.imagePosition;
                                    $scope['saveCroppedResult'+id] = false;
                                };



                                var handleFileSelect=function(evt) {

                                 var file=evt.currentTarget.files[0];
                                 var reader = new FileReader();
                                 reader.onload = function (evt) {

                                     $scope.$apply(function($scope){
                                            $scope['myImage'+id]=evt.target.result;
                                     });

                                 };
                                 reader.readAsDataURL(file);
                             };


                            angular.element(document.querySelector('#fileInput'+id)).on('change',handleFileSelect);