Question

我在Javascript文件中定义了一个AngularJS指令，如下所示：

(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比较陌生，我不太清楚如何做到这一点。非常感谢任何帮助。

谢谢，

皮特

Answer 1

您只需要创建一个重置方法。此外，您可能想要调用父控制器功能。

Using answer from this

<强> 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];
}
...

如何在Javascript函数执行后重新显示指令

1 个答案: