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

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

提问by nikk wong

Yo! I have a controller which houses a bunch of items on its $scope. One of the scope items, $scope.openDialogopens a $mdDialogvia $mdDialog.show(). The object passed into $mdDialog.showhas a template which houses controls for uploading files via the ng-file-uploadproject, which you can read about here.

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

I would like it if the items uploaded in the dialog window would be available in the main controller after exiting out of the dialog window. I am not sure as to whether the controller for the dialog window should reference the main myCtrlcontroller or use its own, and how to take make uploaded files available to myCtrl.

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

Here is the angular code:

这是角度代码：

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: As a housekeeping note, I often hear that application logic shouldn't be passed into a controller. In this situation, how would you move $scope.uploadinto a factory, given that it references $scopeand $scopeis not available in factories?

顺便说一句：作为内务注意事项，我经常听到应用程序逻辑不应该传递到控制器中。在这种情况下，考虑$scope.upload到工厂引用$scope并且$scope在工厂中不可用，您将如何搬入工厂？

Thanks for the help.

谢谢您的帮助。

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

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

回答by kwangsa

You can pass the $scope of your controller to your $mdDialog as an example below

您可以将控制器的 $scope 传递给 $mdDialog 作为下面的示例

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

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

检查 plunkr：http://plnkr.co/edit/0hFWEyWdetTXcPLPkbmQ?p=preview

To move application logic to factory you will be doing something like this

要将应用程序逻辑移至工厂，您将执行以下操作

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

and factory will have method

和工厂会有方法

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

回答by q. wellington

setting scope: $scopein $mdDialog.show() will carry the scope into the modal, and preserveScope: trueshould keep the newly added elements to the $scope, otherwise it will remove them afterward?

scope: $scope$mdDialog.show() 中的设置会将范围带入模态，并且preserveScope: true应该将新添加的元素保留在 $scope 中，否则之后会删除它们？

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