Question

我已经创建了一个指令来处理多个文件上传，并在控制器中定义了一个包含所选文件的范围变量。选择文件后，该指令使用文件对象更新父作用域。我使用了一个循环来显示多个文件上传输入。

这是我的控制器

angular.module('myApp').controller('CompanyReviewsController', ['$state', '$scope', 'company', 'MediaUploadService', 'ReviewsService', 'rating_attributes', 'tags', function ($state, $scope, company, MediaUploadService, ReviewsService, rating_attributes, tags) {

    $scope.company = company;
    $scope.tags = tags;
    $scope.rating_attributes = rating_attributes;
    $scope.gallery = {
        pictures: 0,
        videos: 0,
    };

    $scope.reviewe_form_data = {
        main_picture: null,
        main_video: null,
        review_subject: '',
        review_description: '',
        gallery: {
            pictures: [],
            videos: [],
        }
    };

}]);

这是我的指示

angular.module('myApp').directive('fileUploadDirective', ['$parse', function ($parse) {
    return {
        scope:false,
        link: function (scope, element, attrs) {
            var model = $parse(attrs.fileUploadDirective);
            var modelSetter = model.assign;
            var valid_types = attrs.accept;
            var valid_size = attrs.maxFileSize;//bytes

            element.bind('change', function (event) {
                var file = event.target.files[0];
             scope.$apply(function () {
                                modelSetter(scope, file);
                            });

            });}]);

以下是我的观看摘录

      <div class="add-more-gallery-items add-more-gallery-images full-width  clear-both  pull-left">
                                                <div class="gallery-item" ng-repeat="n in [].constructor($WU_APP_SETTINGS.pages_settings.write_review_page.gallery.pictures.maximum_pictures) track by $index">
                                                      {{reviewe_form_data.gallery}}
                                                    <div class="file-preview position-relative">
                                                        <span data-ng-if="reviewe_form_data.gallery.pictures[$index]" class="reset-image-preview wu-top-0-force wu-right-0-force" >
                                                            <img  src="assets/images/close.png" alt="Close"/>
                                                        </span>

                                                         <img 
                                                            alt="Review Gallery Image" 
                                                            id="review-main-picture-{{$index}}" 
                                                            data-file-preview-element="{{$WU_APP_SETTINGS.pages_settings.write_review_page.default_upload_image}}"
                                                            ng-src="{{$WU_APP_SETTINGS.pages_settings.write_review_page.default_upload_image}}"
                                                            /> 

                                                    </div>
                                                    <input 
                                                        file-upload-directive="reviewe_form_data.gallery.pictures[$index]"  
                                                        data-max-file-size="{{$WU_APP_SETTINGS.pages_settings.write_review_page.gallery.pictures.max_picture_size}}" 
                                                        accept="{{$WU_APP_SETTINGS.pages_settings.write_review_page.gallery.pictures.valid_picture_types}}" 
                                                        class="upload" 
                                                        type="file" 
                                                        data-message-invalid-file="File not valid" 
                                                        data-message-invalid-file-size="File size not valid"    
                                                          data-file-preview-element="#review-main-picture-{{$index}}"
                                                        />
                                                </div>                                               
                                            </div>

简而言之： - 我在控制器中有一个范围变量

$scope.reviewe_form_data = {
    main_picture: null,
    main_video: null,
    review_subject: '',
    review_description: '',
    gallery: {
        pictures: [],
        videos: [],
    }
};

上面的变量通过指令（工作）
更新
范围。$ apply（function（）{ modelSetter（范围，文件）; }）;
但在视图中，当我尝试显示变量
时，它会显示空对象
{{reviewe_form_data.gallery}}

范围变量不在ng-repeat中的视图上更新

0 个答案: