Angularjs - ng-disabled doesn't work as expected

Question

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.

Answer 1

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

Answer 2

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?

Answer 3

did you tried like this

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

here is a working example demo

Answer 4

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.

Answer 5

Try following

ng-disabled="fileInMemory"

Answer 6

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>

Answer 7

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

Answer 8

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