带文件上载控件的AngularJS模态对话框不起作用

时间:2014-06-12 17:41:57

标签: angularjs modal-dialog

我正在使用AngularJS模态服务。 http://fundoo-solutions.github.io/angularjs-modal-service/

我以简单的方式设置它

按钮打开模型

<div data-ng-controller="contest as vm">
   <a class="btn btn-primary" data-ng-click="vm.createFileUploadDialog()">Upload Image</a>
</div>

Inisde Controller我有一个定义了createFileUploadDialog的函数,并从我的viewModel公开它。

 vm.createFileUploadDialog = createFileUploadDialog;
   vm.uploadme = {};
   vm.uploadme.src = "";

 function createFileUploadDialog() {

            createDialog('/app/templates/fileuploadDialog.html', {
                id: 'filuploadDialog',
                title: 'Upload Contest Image',
                backdrop: true,
                success: { label: 'Upload', fn: uploadSuccess },
                cancel: { label: 'Cancel' },
            });
}

function uploadSuccess() {
     console.log(vm.uploadme);
         //need to call to the backend        
}

在“fileUploadDialog.html”里面我有一个简单的标记

<div>
 <input type="file" fileread="uploadme.src" />
</div>

“fileread”是一个返回文件src的指令。现在问题我

正如您所看到的,我正在“ UploadSuccess ”中执行console.log,作为回应我得到了结果"Object {src: ""}",

看起来Modal值不会在控制器内捕获。但如果我对$rootScope执行相同操作,则会注销需要上传的文件。那么,如何在不使用$rootScope的情况下访问该值?请建议

PS: 我没有为Modal定义单独的控制器,想要使用相同的控制器来处理我的视图。

1 个答案:

答案 0 :(得分:0)

**模态范围与您的控制器范围不同!**

如果你想在你的模态中看到你的控制器范围并进行操作,那你就必须在你的模态标记中使用 resolve ,如下所示:

           createDialog('/app/templates/fileuploadDialog.html', {
            id: 'filuploadDialog',
            title: 'Upload Contest Image',
            backdrop: true,
            success: { label: 'Upload', fn: uploadSuccess },
            cancel: { label: 'Cancel' },
             resolve:{
               controllerscope:function(){
                return $scope;
            }
        }
        });

现在,你可以在你的模态控制器中注入:** controllerscope **并使用它,数据绑定也可以这样工作:

        app.controller('modalcontroller',function($scope,controllerscope){
           // no you have access to your controller scope with **controllerscope**
         })

所以,去看看你正在使用的模态插件并搜索 resolve controller

多数民众赞成