Not able to enable a button with ng-disabled in AngularJs

Question

This is what I have in my controller.js

$scope.fileAdded = false;

$scope.fileNameChanged = function() {
    $scope.fileAdded = true;
};

This button I want to enable ...

<a ng-disabled="!fileAdded" class="btn btn-primary" role="button">Click</a>

... when I choose a file:

<input type="file" name="file" id="file"
       onchange="angular.element(this).scope().fileNameChanged(this)">

Although fileAdded changes from false to true, the button is not enabled. Why is it still disabled?

For better ways to do this, see [ng-model for ](https://stackoverflow.com/questions/17063000/ng-model-for-input-type-file/43074638#43074638). — georgeawg, Jun 27 '18 at 13:14

score 2 · Accepted Answer · answered Jun 27 '18 at 11:56

2

With onchange you are out of angularJS. So you need to trigger the digect cycle by yourself:

$scope.fileNameChanged = function() {
    $scope.fileAdded = true;
    $scope.$digest();
};

answered Jun 27 '18 at 11:56

MrWook

score -1 · Answer 2 · answered Jun 27 '18 at 13:17

-1

You should use Angular's ngChange directive, as opposed to the DOM onchange.

<input type="file" name="file" id="file" ng-change="fileNameChanged()">

answered Jun 27 '18 at 13:17

Protozoid

1

The `ng-change` directive doesn't work without the `ng-model` directive. And the `ng-model` directive doesn't work with ` – georgeawg Jun 27 '18 at 15:49
Hmm, didn't know that, thanks @georgeawg. Learn something everyday :) – Protozoid Jun 27 '18 at 18:10

2 Answers2