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