使用 $mdDialog.show() 将范围项返回到父范围

Question

哟！我有一个控制器，它的 $scope 上有一堆物品。范围项目之一，$scope.openDialog 通过 $mdDialog.show() 打开一个 $mdDialog。传入 $mdDialog.show 的对象有一个模板，其中包含用于通过 ng-file-upload 项目上传文件的控件，您可以阅读有关 here 的内容。

如果在对话框 window 中上传的项目在退出对话框 window 后在主控制器中可用，我希望如此。我不确定对话框 window 的控制器是应该引用主 myCtrl 控制器还是使用它自己的控制器，以及如何让上传的文件对 myCtrl 可用。

这里是 angular 代码：

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

您可以将控制器的 $scope 传递给 $mdDialog，如下例所示

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

检查插件：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

setting scope: $scope in $mdDialog.show() 会将作用域带入模态，preserveScope: true 应将新添加的元素保留在 $scope 中，否则会移除它们后来呢？

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

使用 $mdDialog.show() 将范围项返回到父范围

Returning scope items to parent scope with $mdDialog.show()

javascript

angularjs

angularjs-scope

material-design

angular-material