Angularjs file upload not working inside ng-if

Question

Hi I am developing web application in angularjs. I have file upload module. I have below html code.

<div ng-if="FilepathDL == ''">
  <input type="file" file-model="attachmentDL" name="attachmentDL" class="form-control" />
  </div>
  <div ng-if="FilepathDL != ''">                       
  <a ng-href="" ng-click="openfile(FilepathDL)">{{ 'View File' | translate }}</a>
  </div>

On page load i am not assigning any values to FilepathDL so first ng-if statement should render. This is happening. After uploading file when submitting the form $scope.attachmentID is "" If i remove ng-if and directly put then i am getting file. May i know what is happening if i put my file control inside ng-if? Any help would be appreciated. Thank you.

ng-if creates a new scope for the dom elements div. Use ng-show instead — user1608841
– user1608841, Commented Aug 23, 2017 at 5:02
check this stackoverflow.com/a/29669339/1608841; may be possible duplicate — user1608841
– user1608841, Commented Aug 23, 2017 at 5:03

Vivz · Accepted Answer · 2017-08-23 05:08:44Z

1

ng-if creates a child scope. So the file-model is not directly attached to the controllers scope.

You can avoid the problem by any one of the following methods

You can use controller as syntax
You can avoid this by following the dot rule, that is define your file-model on an object.
Use ng-show instead of ng-if

For more reference : https://github.com/angular/angular.js/wiki/Understanding-Scopes

edited Aug 23, 2017 at 5:08

answered Aug 23, 2017 at 5:05

Vivz

6,6282 gold badges19 silver badges34 bronze badges

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

3 Comments

Niranjan Godbole Over a year ago

Thank you. Which is the better solution?

Vivz Over a year ago

Controller as since it implicitly takes care of the dot rule.But you might have to change the code at many places. The easiest one will be to use ng-show or bind your file-model to an object like file-model="file1.attachmentDL" and in your controller use $scope.file1={};

Vivz Over a year ago

Is it working now? You can read the reference given in the answer to understand about JavaScript Prototypal Inheritance.

Collectives™ on Stack Overflow

Angularjs file upload not working inside ng-if

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related