如何重新显示指令JavaScript函数执行

Question

我有一个AngularJS指令中，看起来像这样的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比较陌生，我不太确定如何去做。任何帮助深表感谢。

感谢，

皮特

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