AngularJS - binding input file scope to a different scope

Question

Wasn't sure how to properly title my question, I guess in my case it can also be titled "DOM manipulation not being detected by the scope", but it all depends on the approach of my problem.

To start off, I followed an official example on AngularJS main website with the Projects app which connects with Mongolab. The only difference is I want to add a file input, that reads file name and its lastModifiedDate properties and then applies those values to my form. To make file input work I followed this example here.

I made it work, but the problem is that when values get applied to my form scope is not picking up the changes.

I am doing DOM manipulation in my .apply() function and using $compile too, but something is missing. Or perhaps there's an easier way altogether without doing DOM manipulation?

Here's what I have so far, please take a look at this plunker - http://plnkr.co/edit/mkc4K4?p=preview (Just click on the plus sign icon to add new entry, then try choosing a file.)

Arun P Johny · Accepted Answer · 2013-03-27 11:05:23Z

2

You need to add a watch statement in the CreateCtrl

function CreateCtrl($scope, $location, Movie) {

    $scope.inputfile = {};
    $scope.movie = {};

    $scope.$watch('inputfile.file', function(value){
      $scope.movie.filename = value ? value.name : '';
      $scope.movie.dateadded = value ? value.lastModifiedDate : '';
    })

    $scope.save = function() {
        Movie.save($scope.movie, function(movie) {
            $location.path('/edit/' + movie._id.$oid);
        });
    };
}

Demo: Sample

answered Mar 27, 2013 at 11:05

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

braincomb Over a year ago

Thank you Arun, this is perfect, and no need for DOM manipulation even!

Collectives™ on Stack Overflow

AngularJS - binding input file scope to a different scope

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related