Question

AngularJS boostrap弹出模式代码：

    <div class="modal-header">
    <h3 class="modal-title">Add Gallery</h3>
    </div>
    <div class="modal-body">
    <input type="file" id="file1" name="file" class="filestyle" onchange="angular.element(this).scope().AddPhotoGallery(this.files)" data-buttonname="btn-primary" />    
    <span ng-bind="fileValidationMessage" style="color: red;"></span>

    <div ng-show="showFileData || isUpdate">
        <table id="fileTable" class="table table-striped">
            <thead>
                <tr>
                    <td ng-if="!isUpdate">File Name</td>
                    <td>Image</td>
                    <td>Message</td>
                    <td>Action</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="obj in fileObjectList">
                    <td ng-if="!isUpdate">{{obj.fileName}}</td>
                    <td><img ng-src="{{obj.fileImageUrl}}" alt="No Profile Picture shows" height="150" width="150" class="img-rounded img-responsive" /></td>
                    <td>{{obj.fileMessage}}</td>
                    <td><input type="button" value="Remove" class="btn btn-primary" ng-click="deletePhoto(obj.id)" /></td>
                </tr>
            </tbody>
        </table>
        <div class="form-group">
            <input type="button" class="btn1 btn-sm" ng-click="UploadFiles()" value="Upload Gallery" ng-show="isAddImage" />
        </div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-warning" type="button" ng-click="close()">
        Cancel
    </button>
</div>

$scope.AddPhotoGallery = function ($files) {
            $scope.isAddImage = true;
            $scope.galleryValidationMessage = '';
            var isValid = false;
            // Update scenerio $scope.images.length > 0
            if ($scope.images.length > 0 && $scope.images.length < 2) {
                $scope.images.length++;

                angular.forEach($scope.images, function (value, key) {
                    $scope.fileObjectList.push({
                        'id': $scope.fileCnt,
                        'fileMessage': 'File Added to Gallery',
                        'fileName': value.name,
                        'fileData': value
                    })
                    $scope.fileCnt++;                    
                    $scope.isUpdate = true;
                });
            }
            else if ($scope.fileCnt < 2 && $scope.images.length == 0) {
                angular.forEach($files, function (value, key) {
                    isValid = $scope.doFileValidation(value.name);
                    if (isValid) {
                        $scope.fileObjectList.push({ 'id': $scope.fileCnt, 'fileName': value.name, 'fileData': value, 
                            'fileMessage': 'File Added to Gallery '
                        })
                        $scope.fileCnt++;
                    }
                });
            } else {
                $scope.fileValidationMessage = "Cannot add more pictures. ";
            }
            if ($scope.fileCnt > 0) {
                $scope.showFileData = true;
            }
        };

问题：

当我点击浏览添加文件弹出控制器'AddPhotoGallery'函数调用并推送fileObjectList中的数据时。 Table / Div绑定到'showFileData'，当fileCnt＆gt;时为true。 0（如'AddPhotoGallery'函数的最后一行所示）。问题是table / div，只有当我在弹出屏幕上点击ANYWHERE时才会显示其中的数据。似乎焦点转移到最后一个动作，即文件浏览对话框，它没有回到弹出对话框。

更多说明：

if ($scope.fileCnt > 0) {
   $scope.showFileData = true;
}

当$ scope.showFileData为true时，div / table及其中的数据应该立即显示，但是当我在模态弹出窗口中单击ANYWHERE时它会显示。我知道实际的原因，那就是在浏览后焦点不会回到模态弹出窗口。

可以在任何地方建议如何在使用文件浏览添加文件后将控件/焦点恢复为弹出模式吗？

浏览File uisng AngularJS弹出模式时，焦点在Pop-up对话框中丢失

0 个答案: