如何重新显示指令JavaScript函数执行
问题描述:
我有一个AngularJS指令中,看起来像这样的JavaScript文件中定义后:如何重新显示指令JavaScript函数执行
(function() {
'use strict';
angular
.module('ooApp.controllers')
.directive('fileUploader', fileUploader);
fileUploader.$inject = ['appInfo', 'fileManager'];
function fileUploader(appInfo, fileManager) {
var directive = {
link: link,
restrict: 'E',
templateUrl: 'views/directive/UploadFile.html',
scope: true
};
return directive;
function link(scope, element, attrs) {
scope.hasFiles = false;
scope.files = [];
scope.upload = fileManager.upload;
scope.appStatus = appInfo.status;
scope.fileManagerStatus = fileManager.status;
}
}
})();
,并在指令的模板URL有一个按钮,调用JavaScript函数,它看起来像这样:
function upload(files) {
var formData = new FormData();
angular.forEach(files, function (file) {
formData.append(file.name, file);
});
return fileManagerClient.save(formData)
.$promise
.then(function (result) {
if (result && result.files) {
result.files.forEach(function (file) {
if (!fileExists(file.name)) {
service.files.push(file);
}
});
}
appInfo.setInfo({ message: "files uploaded successfully" });
return result.$promise;
},
function (result) {
appInfo.setInfo({ message: "something went wrong: " +
result.data.message });
return $q.reject(result);
})
['finally'](
function() {
appInfo.setInfo({ busy: false });
service.status.uploading = false;
});
}
一旦我选择要上传的文件,然后点击上传按钮,我需要重新加载指令或者以某种方式将其恢复到初始状态,以便我可以上传其他文件。我对AngularJS比较陌生,我不太确定如何去做。任何帮助深表感谢。
感谢,
皮特
答
你只需要创建一个复位方法。此外,您可能需要调用父控制器功能。
ngFileSelect.directive.js
...
.directive("onFileChange",function(){
return {
restrict: 'A',
link: function($scope,el){
var onChangeHandler = scope.$eval(attrs.onFileChange);
el.bind('change', onChangeHandler);
}
}
...
fileUploader.directive.js
(function() {
'use strict';
angular
.module('ooApp.controllers')
.directive('fileUploader', fileUploader);
fileUploader.$inject = ['appInfo', 'fileManager'];
function fileUploader(appInfo, fileManager) {
return {
link: link,
restrict: 'E',
templateUrl: 'views/directive/UploadFile.html',
scope:{
onSubmitCallback: '&',
onFileChange: '&'
}
};
function link(scope, element, attrs) {
scope.reset = reset;
scope.fileChange = fileChange;
reset();
function reset() {
scope.hasFiles = false;
scope.files = [];
scope.upload = fileManager.upload;
scope.appStatus = appInfo.status;
scope.fileManagerStatus = fileManager.status;
if(typeof scope.onSubmitCallback === 'function') {
scope.onSubmitCallback();
}
}
function fileChange(file) {
if(typeof scope.onFileChange === 'function'){
scope.onFileChange(file);
}
}
}
}
})();
UploadFile.html
<form>
<div>
...
</div>
<input type="submit" ng-click="reset()" file-on-change="fileChange($files)" />Upload
</form>
parent.html
<file-uploader on-submit-callback="onUpload" on-file-change="onFileChange" ng-controller="UploadCtrl" />
upload.controller.js
...
$scope.onUpload = function() {
console.log('onUpload clicked %o', arguments);
};
$scope.onFileChange = function(e) {
var imageFile = (e.srcElement || e.target).files[0];
}
...
谢谢。我能够在你需要帮助的情况下按照我想要的方式工作。 – Pete
现在,我想显示成功上传的附件。有没有办法将成功上传的文件传回父控制器?更具体地说,在工厂的上传(文件)函数中有$ resource回调函数。我想将成功上传的文件传递给父控制器,以便我可以在视图中显示它们。是适当的技术?仍在学习Angular。 。 。谢谢 。 。 。 Pete – Pete
@Pete我已经更新了答案。它基本上是添加一个指令作为另一个指令的子节点,并将回调传递给父控制器。 – tsuz