1

I am working with file upload using the angularJs 1.3 I have a situation where the controller can access the file without the data-ng-if in the tag, but if I include the data-ng-if the file in the controller is undefined can anyone help me understand more about the issue, and a solution that I can use data-ng-if while uploading the file

<div ng-controller = "QuestionsListController">
    <form id="questionForm" enctype="multipart/form-data" method="post" data-ng-submit="uploadForm()">
        <p>
            <div class="form-group" data-ng-if="isTestQuestion">
                <input type="file" file-model="myFile"/>
            </div>
        </p>        
        <button type="submit">upload me</button>
    </form>
</div>

the script that contains controller and service and directive

myApp.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileAndFieldsToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);

        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(data){
            console.log("success : ",data);
        })
        .error(function(){
            console.log("fail");
        });
    }
}]);

myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){

    $scope.uploadForm = function(){
        var file = $scope.myFile;
        console.log('file is ' + JSON.stringify(file));
        var uploadUrl = 'http://localhost:8080/ajax/recruiter/codingQuestion';
        fileUpload.uploadFileAndFieldsToUrl(file, uploadUrl);
    };

}]);

I can see the file in the directive using the console.log() thanks in advance. :)

2
  • What is isTestQuestion? It's not in the code you provided and therefor may be undefined, so the ngIf resolves to false. On the other hand, you provide code for a controller named myCtrl, but in the template you use QuestionsListController. Commented Apr 15, 2015 at 14:33
  • isTestQuestion is a boolean variable, it is defined as true.. and the controller , my mistake, but I use the myCtrl in the ng-controller .and find the same status Commented Apr 16, 2015 at 3:42

1 Answer 1

2

The ng-if creates a new scope for the dom elements within the 'form-group' div. Use ng-show instead

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.