使用$ mdDialog.show（）返回範圍項目到父範圍

Question

喲！我有一個控制器，它的$scope上有一堆物品。其中一個範圍項目$scope.openDialog通過$mdDialog.show()打開$mdDialog。傳入$mdDialog.show的對象有一個模板，其中包含通過ng-file-upload項目上傳文件的控件，您可以從中閱讀有關here的信息。

如果在退出對話框窗口之後，在對話框窗口中上傳的項目在主控制器中可用，我會喜歡它。我不確定對話框窗口的控制器是應該引用主控制器還是使用自己的控制器，以及如何將上傳的文件提供給myCtrl。

這裏是角代碼：

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

順便說一句：作爲持家說明，我經常聽到應用邏輯不應當被傳遞到控制器。在這種情況下，您如何將$scope.upload轉入工廠，因爲它參考$scope而$scope在工廠中不可用？

感謝您的幫助。

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

Answer 1

你可以通過控制器的$範圍到$ mdDialog如下

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

檢查plunkr一個例子：http://plnkr.co/edit/0hFWEyWdetTXcPLPkbmQ?p=preview

要移動的應用程序邏輯到出廠你將會這樣做

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

和工廠將不得不方法

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

在$ mdDialog.show（設置scope: $scope）將攜帶的範圍爲模式，並preserveScope: true應保持最新添加的元素到$範圍，否則會之後將其刪除？

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