I am trying to disable file input tag, after user selected a file.

HTML:

<div ng-controller='firstController'>
    <div ng-controller='secondController'>
      <input type="file" name="file" upload class="theFileInput" ng-disabled="fileInMemory">
    </div>
</div>

JS, first controller:

$scope.fileInMemory = false; // tracks if user selected a file for upload, but didn't upload it
$rootScope.$on('fileAdded', function () {
     $scope.fileInMemory = true;
     console.log($scope.fileInMemory);
});

upload is a directive.

On page load, ng-disabled has false as it should, when fileInMemory is changed, input tag still not being disabled. console.log shows that the value of fileInMemory is changing as it should.

What i tried so far

<input type="file" name="file" class="theFileInput" ng-disabled="'fileInMemory'">

Just disables the field right away, when fileInMemory is falsy.

<input type="file" name="file" class="theFileInput" ng-disabled="fileInMemory == 'true'">

Doesn't work.

<input type="file" name="file" class="theFileInput" ng-disabled="{{fileInMemory}}">

Still doesn't work.

What is the best way to disable an input tag?

Found the issue

It looks like the issue here is scopes. I have firstController with its' scope, inside it secondController with its' scope, and on the input tag upload directive, which apparently creates its' own scope and doesn't see firstController scope.

secondController and upload are general controllers and therefore don't inherit from firstController.

I guess my best solution is to add some general handler in secondController, which based on additional attribute on input field will disable the it when needed.

I am trying to disable file input tag, after user selected a file.

HTML:

<div ng-controller='firstController'>
    <div ng-controller='secondController'>
      <input type="file" name="file" upload class="theFileInput" ng-disabled="fileInMemory">
    </div>
</div>

JS, first controller:

$scope.fileInMemory = false; // tracks if user selected a file for upload, but didn't upload it
$rootScope.$on('fileAdded', function () {
     $scope.fileInMemory = true;
     console.log($scope.fileInMemory);
});

upload is a directive.

On page load, ng-disabled has false as it should, when fileInMemory is changed, input tag still not being disabled. console.log shows that the value of fileInMemory is changing as it should.

What i tried so far

<input type="file" name="file" class="theFileInput" ng-disabled="'fileInMemory'">

Just disables the field right away, when fileInMemory is falsy.

<input type="file" name="file" class="theFileInput" ng-disabled="fileInMemory == 'true'">

Doesn't work.

<input type="file" name="file" class="theFileInput" ng-disabled="{{fileInMemory}}">

Still doesn't work.

What is the best way to disable an input tag?

Found the issue

It looks like the issue here is scopes. I have firstController with its' scope, inside it secondController with its' scope, and on the input tag upload directive, which apparently creates its' own scope and doesn't see firstController scope.

secondController and upload are general controllers and therefore don't inherit from firstController.

I guess my best solution is to add some general handler in secondController, which based on additional attribute on input field will disable the it when needed.

• javascript
• html
• angularjs

• 1 don't use an expression, just the variable – charlietfl Commented Sep 8, 2014 at 11:41
• I think the file input is not in the scope that fileInMemory belong to. Can you make a demo? – Alborz Commented Sep 8, 2014 at 11:46
• @charlietfl i used the variable as well, it doesn't work. – Neara Commented Sep 8, 2014 at 11:47
• @Alborz how can i check if they are in the same scope? when i output the value of fileInMemory to the HTML, it shows properly, with correct value. – Neara Commented Sep 8, 2014 at 11:48
• 1 Do you use a nested scope? use abject instead of primitive type. – Alborz Commented Sep 8, 2014 at 11:56

8 Answers 8

You're going to have to leverage $apply here because it's being changed inside of the event:

$scope.fileInMemory = false;
$rootScope.$on('fileAdded', function () {
    $scope.$apply(function() {
        $scope.fileInMemory = true;
        console.log($scope.fileInMemory);
    });
});

UPDATE: in response to an isolated-scope causing issues, move fileInMemory to the $rootScope:

$rootScope.fileInMemory = false;
$rootScope.$on('fileAdded', function () {
    $rootScope.$apply(function() {
        $rootScope.fileInMemory = true;
        console.log($scope.fileInMemory);
    });
});

If the problem is with scopes, try using "controller as" syntax:

<div ng-controller='firstController as first'>
    <div ng-controller='secondController as second'>
      <input type="file" name="file" upload class="theFileInput" ng-disabled="first.fileInMemory">
    </div>
</div>

Link: AngularJs "controller as" syntax - clarification?

did you tried like this

<input type="file" name="file" class="theFileInput" ng-disabled="fileInMemory">

here is a working example demo

Briefly, each ngController creates a new child scope. The scope created by secondController shadows the value of fileInMemory from firstController. Because of this, the change doesn't propagate and its value is locked to false. This can easily be avoided by using controllerAs syntax.

Try following

ng-disabled="fileInMemory"

Use abject instead of primitive type.

In the first controller:

$scope.model = {};
$scope.model.fileInMemory = false; 
$rootScope.$on('fileAdded', function () {
        $scope.model.fileInMemory = true;
        console.log($scope.model.fileInMemory);
    });

<div ng-controller='firstController'>
    <div ng-controller='secondController'>
      <input type="file" name="file" class="theFileInput" ng-disabled="model.fileInMemory">
    </div>
</div>

did you try this:

HTML:

<div ng-controller='firstController'>
    <div ng-controller='secondController'>
      <input type="file" name="file" upload class="theFileInput" ng-disabled="fileInMemory.disabled">
    </div>
</div>

Controller:

$scope.fileInMemory = { disabled: false }; 

$rootScope.$on('fileAdded', function () {
     $scope.fileInMemory.disabled = true;
     console.log($scope.fileInMemory);
});

Working fiddle here

Your model is being changed on the console but not in views because this change is happening outside of angular app. The way to fix it is to call $apply on $rootScope to ensure that the views are updated of this event being called from outside angular app scope.

// Something like this
$rootScope.$apply(function() {
  $rootScope.fileInMemory = true;
  // Now it'll be changed in views too
});