Question

我是AngularJS的新手我正在尝试刷新Angular控制器之外的某些Angular范围。

我尝试获取此特定控制器的范围参考，但我得到 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>

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

范围未定义AngularJS

1 个答案: