Restituzione degli elementi dell'ambito all'ambito principale con $ mdDialog.show()

Question

Yo! Ho un controller che ospita un gruppo di articoli sul suo $scope. Uno degli elementi dell'ambito, $scope.openDialog apre uno $mdDialog tramite $mdDialog.show(). L'oggetto passato in $mdDialog.show ha un modello che contiene i controlli per il caricamento di file tramite il progetto ng-file-upload, che è possibile leggere su here.

Mi piacerebbe se gli elementi caricati nella finestra di dialogo fossero disponibili nel controller principale dopo essere usciti dalla finestra di dialogo. Non sono sicuro se il controller per la finestra di dialogo debba fare riferimento al controller principale myCtrl o utilizzarne uno e come rendere disponibili i file caricati a myCtrl.

ecco il codice angolare:

angular.module('app', ['ngMaterial', 'ngFileUpload']) 
.controller('myCtrl', ['$scope', '$mdDialog', 'Upload', function($scope, $mdDialog, Upload) { 
    var tmpl = "<md-dialog>\n" + 
    "<md-dialog-content>\n" + 
    " <input type=\"text\" ng-model=\"username\"></br></br>\n" + 
    " <input type=\"checkbox\" ng-model=\"multiple\">upload multiple file</br></br>\n" + 
    " watching model:\n" + 
    " <div class=\"button\" ngf-select ng-model=\"files\" ngf-multiple=\"multiple\">Select File</div>\n" + 
    " on file change:\n" + 
    " <div class=\"button\" ngf-select ngf-change=\"upload($files)\" ngf-multiple=\"multiple\">Select File</div>\n" + 
    " Drop File:\n" + 
    " <div ngf-drop ngf-select ng-model=\"files\" class=\"drop-box\" \n" + 
    "  ngf-drag-over-class=\"dragover\" ngf-multiple=\"true\" ngf-allow-dir=\"true\"\n" + 
    "  accept=\"image/*,application/pdf\">Drop pdfs or images here or click to upload</div>\n" + 
    " <div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>\n" + 
    " Image thumbnail: <img ngf-src=\"files[0]\">\n" + 
    " Files:\n" + 
    " <ul>\n" + 
    "  <li ng-repeat=\"f in files\" style=\"font:smaller\">{{f.name}}</li>\n" + 
    " </ul>\n" + 
    " Upload Log:\n" + 
    " <pre>{{log}}</pre>\n" + 
    "<md-action><div class=\"button\" ng-click=\"close()\">close!</div></md-action>\n" + 
    "<md-action><div class=\"button\" ng-click=\"upload()\">upload!</div></md-action>\n" + 
    "</md-dialog-content>\n" + 
    "</md-dialog>"; 
$scope.files = ['files should appear here', 'files 1', 'file2']; 
$scope.openDialog = function() { 
    $mdDialog.show({ 
     parent: angular.element(document.body), 
     template: tmpl, 
     controller: 'myCtrl' 
    }); 
}; 
$scope.close = function() { 
    $mdDialog.hide(); 
}; 
$scope.$watch('files', function() { 
    $scope.upload($scope.files); 
}); 
$scope.upload = function (files) { 
     if (files && files.length) { 
      for (var i = 0; i < files.length; i++) { 
       var file = files[i]; 
       Upload.upload({ 
        url: 'upload/url', 
        fields: {'username': $scope.username}, 
        file: file 
       }).progress(function (evt) { 
        var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
        console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name); 
       }).success(function (data, status, headers, config) { 
        console.log('file ' + config.file.name + 'uploaded. Response: ' + data); 
       }); 
      } 
     } 
    }; 
}]); 

BTW: Come nota di pulizia, sento spesso che la logica applicazione non deve essere passato in un controller. In questa situazione, come faresti spostare $scope.upload in una fabbrica, dato che fa riferimento a $scope e $scope non è disponibile nelle fabbriche?

Grazie per l'aiuto.

Plnkr: http://plnkr.co/edit/e2MYdEABhj34ahtPTO0g?p=preview

Answer 1

È possibile passare il $ ambito del controller al $ mdDialog come esempio di seguito

$mdDialog.show({ 
    parent: angular.element(document.body), 
    template: tmpl, 
    scope: $scope, 
    controller: 'myCtrl' 
}); 

Controllare plunkr: http://plnkr.co/edit/0hFWEyWdetTXcPLPkbmQ?p=preview

Per spostare la logica dell'applicazione alla fabbrica si sarà fare qualcosa di simile

$scope.upload = factory.upload(files,$scope.username); 

e fabbrica avrà metodo

factory.upload = function(files,username) 
{ 
    function (files) { 
    if (files && files.length) { 
     for (var i = 0; i < files.length; i++) { 
      var file = files[i]; 
      Upload.upload({ 
       url: 'upload/url', 
       fields: {'username': username}, 
       file: file 
      }).progress(function (evt) { 
       var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
       console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name); 
      }).success(function (data, status, headers, config) { 
       console.log('file ' + config.file.name + 'uploaded. Response: ' + data); 
      }); 
     } 
    } 
}; 

Answer 2

impostazione scope: $scope a $ mdDialog.show() porterà la portata in modal e preserveScope: true dovrebbe mantenere gli elementi appena aggiunti al $ portata, altrimenti sarà rimuoverli dopo ?

$mdDialog.show({ 
    template: tmpl, 
    scope: $scope, 
    preserveScope: true, 
    controller: 'myCtrl' 
});