Binding Angular data after a jQuery animation

Question

I'm running a jQuery animation, after which I need to update the value of the data inside the animated element.

For some reason I cannot do this

$scope.myVar = "START";

$("#div").delay(100).animate({
    top: '50px'
}, {
    duration: $scope.speed,
    easing: $scope.ease,
    complete: function () {
        $scope.myVar = "FINISHED";
    }
});

When logging the variable it does update; however, this is not reflected on screen.

Blazemonger · Accepted Answer · 2014-03-07 16:10:24Z

3

You will need to use $scope.apply. From angular documentation

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries)

edited Mar 7, 2014 at 16:10

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

answered Mar 7, 2014 at 16:07

Anand

15k8 gold badges35 silver badges44 bronze badges

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

1 Comment

Paul Over a year ago

Thanks for the (very) quick reply. It seems a novice question so hope it helps someone else out.

Darko Romanov · Accepted Answer · 2014-03-07 16:12:53Z

1

I usually use $timeout:

$timeout(function () {
  //$scope.myvar = "FINISHED";
}, 0);

it works but I don't know how much it's elegant...

answered Mar 7, 2014 at 16:12

Darko Romanov

2,8052 gold badges32 silver badges39 bronze badges

Collectives™ on Stack Overflow

Binding Angular data after a jQuery animation

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related