呦!我有一个控制器,在其范围内容纳了一堆物品.其中一个范围项$scope.openDialog通过$mddialog.show()打开$mddialog.传递给$mddialog.show的对象有一个模板,其中包含通过ng-file-upload项目上传文件的控件,您可以阅读有关
here的内容.
如果在退出对话框窗口后,在对话框窗口中上传的项目在主控制器中可用,我希望这样.我不确定对话框窗口的控制器是应该引用主myCtrl控制器还是使用它自己的,以及如何将make上传的文件提供给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在工厂中不可用?
谢谢您的帮助.
解决方法
您可以将控制器的$scope传递给$mddialog,如下例所示
$mddialog.show({ parent: angular.element(document.body),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,config) { console.log('file ' + config.file.name + 'uploaded. Response: ' + data); }); } } };
原文地址:https://www.jb51.cc/js/153574.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。