Change bound angular variable from inside event callback

Question

I'm trying to change an input field's value when a video loads. Here's the relevant code:

This works:

$scope.stopRecording = function () {
    // value of the input changes as expected
    $scope.videoEndPos = 10;
};

This doesn't

$scope.stopRecording = function () {

    video.onloadedmetadata = function() {

        $scope.videoEndPos = 10;

        // the value of the input does not change, but this still correctly outputs 10
        console.log($scope.videoEndPos);
    };

};

In an effort to keep this short I left out some crucial video stuff there, but that part is working and the onloadedmetadata is firing properly, so its something funky with angular and the input. However, let me know if you suspect I've left out some relevant code.

mguymon · Accepted Answer · 2014-06-20 17:19:35Z

2

The video.stopRecording happens outside of the Angular universe, so it does not know about the change. What you need to use is $scope.$apply, which allows you to execute changes to the scope from outside of Angular.

$scope.stopRecording = function () {

    video.onloadedmetadata = function() {
        $scope.$apply(function(){
            $scope.videoEndPos = 10;
        });

        // the value of the input does not change, but this still correctly outputs 10
        console.log($scope.videoEndPos);
    };

};

answered Jun 20, 2014 at 17:19

mguymon

9,0252 gold badges41 silver badges61 bronze badges

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

Comments

Joe · Accepted Answer · 2014-06-20 17:19:23Z

1

The video.onloadedmetadata is probably an asynchronous call that doesn't return until after the digest loop. Change it to this:

$scope.stopRecording = function () {

    video.onloadedmetadata = function() {
        $scope.$apply(function() {
          $scope.videoEndPos = 10;
        });
    };
};

answered Jun 20, 2014 at 17:19

Joe

2,5962 gold badges16 silver badges12 bronze badges

Collectives™ on Stack Overflow

Change bound angular variable from inside event callback

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related