How to redisplay directive after Javascript function executes

Question

I have an AngularJS Directive defined in a Javascript file that looks like this:

(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;

    }
}

})();

and in the template URL of the directive there is a button that calls a Javascript function which looks like this:

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;
              });
                }

Once I select files for upload and click the upload button I need to reload the directive or somehow get it back to it's initial state so I can upload additional files. I'm relatively new to AngularJS and I'm not quite sure how to do this. Any help is much appreciated.

Thanks,

Pete

score 0 · Accepted Answer · edited May 23 '17 at 12:30

You just need to create a reset method. Also, you may want to call the parent controller function.

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

Thank you. I was able to get this working the way I wanted it with your help. — Pete, Nov 18 '16 at 00:20
Now, though, I would like to display the attachments successfully uploaded. Is there a way to pass the files successfully uploaded back to the parent controller? More specifically, in the upload(files) function in the factory there is the $resource callback function. I want to pass the file(s) successfully uploaded from there to the parent controller so I can display them in the view. Is the proper technique? Still learning Angular . . . thx . . . Pete — Pete, Nov 18 '16 at 00:30
@Pete I've updated the answer. It's basically adding a directive as a child of another directive and passing the callback to the parent controller. — Taku, Nov 18 '16 at 07:04
Thanks for your help. Unfortunately, I won't be able to get back to this until Monday. I'll update this post then. — Pete, Nov 19 '16 at 16:30

How to redisplay directive after Javascript function executes

1 Answers1