scope не определено AngularJS

Question

Я новичок в AngularJS.
Я пытаюсь обновить определенные угловые рамки вне углового контроллера.

Я пытаюсь получить ссылку на область действия для этого определенного контроллера, но я получаю undefined.
Я много раз искал, но не нашел что-то, что сработало, и я не уверен, что я делаю неправильно.

Вот код:

HTML

<div class="form-group" ng-app="cms"> 
<label class="col-md-2 control-label">Images</label> 
<div id="scope" class="col-md-10 mix-grid thumbnails" ng-controller="ImagesController"> 
    <div class="col-md-2 col-sm-2 mix" ng-repeat="image in images"> 
     <div class="mix-inner"> 
      <img class="img-responsive" ng-src="/assets/user_uploads/pages/<% image.image_name %>" alt=""> 
      <div class="mix-details"> 
       <a class="mix-icon icon-preview fancybox-button tooltips" data-placement="bottom" data-original-title="Preview" href="/assets/user_uploads/pages/<% image.image_name %>" data-rel="fancybox-button"><i class="fa fa-search"></i></a> 
       <a class="mix-icon icon-edit tooltips" data-image-id="<% image.id %>" data-image-table="pages_images" data-placement="bottom" data-original-title="Edit"><i class="fa fa-edit"></i></a> 
       <a ng-click="removeImage(image.id, image)" class="mix-icon icon-delete tooltips" data-placement="bottom" data-original-title="Delete"><i class="fa fa-times"></i></a> 
      </div> 
     </div> 
    </div> 
</div> 

Угловая JS

var scope = angular.element($("#scope")).scope(); 
function ImagesController($scope, $http) 
{ 
    $http.get('/admin/images/ajaxGetImages/{{ Request::segment(3) }}').success(function(images) { 
     $scope.images = images; 
    }); 

    $scope.removeImage = function(id, image) { 
     bootbox.confirm("Delete the image?", function(result) { 
      if (result) { 
       $http.post('/admin/images/ajaxRemoveImage/'+id).success(function() { 
        $scope.images.splice($scope.images.indexOf(image), 1); 
        bootbox.alert("Successfully deleted"); 
       }); 
      } 
     }); 
    }, 

    $scope.refresh = function() { 
     $http.get('/admin/images/ajaxGetImages/{{ Request::segment(3) }}').success(function(images) { 
      $scope.images = images; 
     }); 
    } 
} 

JQuery

$('.modal-footer .image-update').on('click', function() { 
    var imageId = $(this).attr('data-image-id'); 
    var imageAlt = $('.modal-body #image_alt').val(); 
    var imageTitle = $('.modal-body #image_title').val(); 
    var imageLink = $('.modal-body #image_link').val(); 
    $.ajaxFileUpload({ 
     url   : '/admin/images/ajaxUpdatePageImage/'+imageId, 
     secureuri  : false, 
     fileElementId : 'image_new', 
     dataType  : 'json', 
     data   : { imageAlt: imageAlt , imageTitle: imageTitle , imageLink: imageLink }, 
     success  : function (data) { 
      bootbox.alert("Successfully updated"); 
      $('.modal').modal('hide'); 
      scope.$apply(function(){ 
       scope.refresh(); 
      }); 
     } 
    }); 
}); 

Будем благодарны за любую помощь.

Answer 1

попытка переместить код внутри обработчика щелчка, потому что, когда сценарий выполняется угловой компиляции элемента не может быть завершена

$('.modal-footer .image-update').on('click', function() { 
    var scope = angular.element("#scope").scope(); 
    var imageId = $(this).attr('data-image-id'); 
    var imageAlt = $('.modal-body #image_alt').val(); 
    var imageTitle = $('.modal-body #image_title').val(); 
    var imageLink = $('.modal-body #image_link').val(); 
    $.ajaxFileUpload({ 
     url   : '/admin/images/ajaxUpdatePageImage/'+imageId, 
     secureuri  : false, 
     fileElementId : 'image_new', 
     dataType  : 'json', 
     data   : { imageAlt: imageAlt , imageTitle: imageTitle , imageLink: imageLink }, 
     success  : function (data) { 
      bootbox.alert("Successfully updated"); 
      $('.modal').modal('hide'); 
      scope.$apply(function(){ 
       scope.refresh(); 
      }); 
     } 
    }); 
});