CODEWITHSUNDEEP
angularjsmodal-dialog
Ammar Khan
Ammar Khan

Reputation: 2585

AngularJS Modal Dialog with File Upload Control not working

I am using AngularJS Modal Service. http://fundoo-solutions.github.io/angularjs-modal-service/

I setup it in a simple way

Button to open a Model

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

Inisde Controller I have a function defined createFileUploadDialog and expose it from my 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        
}

And inside "fileUploadDialog.html" I have a simple markup

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

"fileread" is a directive which return back the src of the File. Now the problem I have

As you can see I am doing console.log inside "UploadSuccess", in response I am getting the result "Object {src: ""}",

It looks like the Modal values not capture inside controller. But If I do the same with $rootScope, it logs out the File that need to upload. So, how can I access the value without using $rootScope? Please suggest

PS: I am not define separate controller for Modal, want to use the same controller that treats my view.

Upvotes: 1

Views: 3090

Answers (1)

Milad
Milad

Reputation: 28590

** Modals scope is not the same as your controller scope!**

if you want to see your Controller scope inside of your modal and manupulate it , you're gonna have to use resolve inside of your modal markap like this : 

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

And now , inside of your modal controller you can inject :** controllerscope ** and use it , also data binding works well like this :

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

So go and have a look at your modal plug in wich you are using and search for resolve and controller

thats it

Upvotes: 0

Related Questions