JQuery animations and AngularJS

Question

I have this code:

HTML code:

<!DOCTYPE html>
<html ng-app="test">

  <head lang="en">
    <meta charset="utf-8">
    <title>Wtf is that</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body ng-controller="testCtrl">

    {{test}}
    <br />
    <button ng-click="set()">set</button>
    <button ng-click="setTimeout()">setTimeout</button>

  </body>

</html>

AngularJS code:

var app = angular.module('test', []);

app.controller('testCtrl', function($scope, $timeout) {
  $scope.test = false;
  $scope.set = function() {
        $timeout(function() {
                $scope.test = !$scope.test;
        }, 1000);
  };
  $scope.setTimeout = function() {
        $('body').slideUp(1000, function () {
            $('body').slideDown(1000, function () {
                $scope.test = !$scope.test;
        console.log($scope.test);
                console.log('done');
            });
        });
  };
});

Why $scope variables doesn't change when I changing after the animation ends?

In timeout:

  $scope.set = function() {
    $timeout(function() {
            $scope.test = !$scope.test;
    }, 1000);
};

All working ok.

Angular and Angular js are different please tag correctly

Rahul Singh
– Rahul Singh

2017-09-02 18:29:22 +00:00
Commented Sep 2, 2017 at 18:29 — Rahul Singh
– Rahul Singh, Commented Sep 2, 2017 at 18:29

score 1 · Accepted Answer · 2017-09-02 18:36:56Z

1

var app = angular.module('test', []);

app.controller('testCtrl', function($scope, $timeout) {
    $scope.test = false;
    $scope.set = function() {
        $timeout(function() {
            $scope.$apply(function() {
                console.log("update time clicked");
                $scope.test = !$scope.test;
            });
        }, 1000);
    };
    $scope.setTimeout = function() {
        $('body').slideUp(1000, function() {
            $('body').slideDown(1000, function() {
                $scope.$apply(function() {
                    $scope.test = !$scope.test;
                });
            });
        });
    };
});

<!DOCTYPE html>
<html ng-app="test">

<head lang="en">
    <meta charset="utf-8">
    <title>Wtf is that</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body ng-controller="testCtrl">

    {{test}}
    <br />
    <button ng-click="set()">set</button>
    <button ng-click="setTimeout()">setTimeout</button>

</body>

</html>

you need to use $scope.$apply because when you change an AngularJS model outside (from external JavaScript) - you need to use $scope.$apply() to AngularJS know that model has modified.

edited Sep 2, 2017 at 18:36

answered Sep 2, 2017 at 18:11

user7110739

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

7 Comments

polak polkovski Over a year ago

But {{test}} still displays false

Maxim Shoustin Over a year ago

Take a look on @eKimiya answer.

user7110739 Over a year ago

i have added timeout before but the problem occurs because i have not added $scope.$apply that is why not working

Maxim Shoustin Over a year ago

its ok, just give few words why we need $apply, not just working solution. Its not good practice in SO :)

user7110739 Over a year ago

please ask polak polkovski my answer not give him real time changethat is the reason i have changed answer

|

Adrien LAMOTTE · Accepted Answer · 2017-09-02 18:15:32Z

0

Because jQuery animations are running outside of Angular scope. You need to specify to Angular that your scope has changed with :

$scope.$apply();

https://plnkr.co/edit/hfIlZzBXo9hTmIvJ15oa?p=preview

answered Sep 2, 2017 at 18:15

Adrien LAMOTTE

5984 silver badges9 bronze badges

Comments

Maxim Shoustin · Accepted Answer · 2017-09-02 18:16:36Z

0

If you use jQuery, Angular doesn't know about DOM manipulations. To trigger digest cycle you can wrap $scope.test = !$scope.test; with $timeout to make it work:

$('body').slideUp(1000, function () {
        $('body').slideDown(1000, function () {
           $timeout(function(){
            $scope.test = !$scope.test;
            });
        });
    });

Fixed Demo

answered Sep 2, 2017 at 18:16

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Collectives™ on Stack Overflow

JQuery animations and AngularJS

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related