Pete Pete - 21 days ago 5
AngularJS Question

How to redisplay directive after Javascript function executes

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

Answer

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" ng-controller="UploadCtrl" />

upload.controller.js

...

$scope.onUpload = function() {
    console.log('onUpload clicked %o', arguments);
}
...