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.

I think the file input is not in the scope that fileInMemory belong to. Can you make a demo? — Alborz, Sep 08 '14 at 11:46
@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, Sep 08 '14 at 11:48
are there any child scopes involved? Might be better if you use an object with `fileInMemory` as property if there are child scopes — charlietfl, Sep 08 '14 at 11:50
Do you use a nested scope? use abject instead of primitive type. — Alborz, Sep 08 '14 at 11:56
@Alborz yep, nested scope issue, indeed. ty, helped me figure out whats wrong ;) — Neara, Sep 08 '14 at 12:54

score 5 · Accepted Answer · edited Sep 04 '16 at 01:40

5

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

edited Sep 04 '16 at 01:40

morningstar

8,952
6
31
42

answered Sep 08 '14 at 12:54

Mike Perrenoud

66,820
29
157
232

i tried it with `$scope.$apply` but it still doesn't work. I think that `directive` on the element creates its own isolated scope. – Neara Sep 08 '14 at 13:12
@Neara, the fix there would be to move the variable to the `$rootScope` instead of `$scope`. – Mike Perrenoud Sep 08 '14 at 13:15

score 2 · Answer 2 · edited May 23 '17 at 10:31

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?

edited May 23 '17 at 10:31

Community

1
1

answered Sep 05 '16 at 02:06

Daniel Barral

3,896
2
35
47

score 1 · Answer 3 · answered Sep 08 '14 at 11:41

1

did you tried like this

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

here is a working example demo

answered Sep 08 '14 at 11:41

Narek Mamikonyan

4,601
2
24
30

i have posted demo link, can you share your code ? may be the value is not in right scope ? – Narek Mamikonyan Sep 08 '14 at 11:47
i added more code, i do have one controller inside another, and the variable is being manipulated by outer controller. is it an issue? – Neara Sep 08 '14 at 11:52
yes, if you have nested controllers you should use controller name before variable for example ctrl2.fileInMemory – Narek Mamikonyan Sep 08 '14 at 11:54

score 1 · Answer 4 · edited Sep 15 '17 at 19:43

1

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.

edited Sep 15 '17 at 19:43

philipvr

5,738
4
32
44

answered Sep 06 '16 at 14:27

Cosmin Ababei

7,003
2
20
34

cevek · Answer 5 · 2014-09-08T11:55:50.610

0

Try following

ng-disabled="fileInMemory"

edited Sep 08 '14 at 11:55

answered Sep 08 '14 at 11:43

cevek

862
1
7
16

score 0 · Answer 6 · answered Sep 08 '14 at 11:59

0

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>

answered Sep 08 '14 at 11:59

Alborz

6,843
3
22
37

i tried this, it still doesn't work. I also tried referencing by controller first: `firstController.model.fileInMemory`. – Neara Sep 08 '14 at 12:04
post a demo if it is possible. – Alborz Sep 08 '14 at 12:07

gianlucatursi · Answer 7 · 2016-09-06T14:16:52.170

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

score -1 · Answer 8 · edited Sep 06 '16 at 13:51

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

Angularjs - ng-disabled doesn't work as expected

8 Answers8