呦！我有一个控制器,在其范围内容纳了一堆物品.其中一个范围项$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);
});
}
}
};
