Angular and Animate.css - Doesn't display correct information when used together

StackOverflow https://stackoverflow.com/questions/19919906

Question

Having a bit of trouble with putting together Animate.css and AngularJS together, and I created a simple example hoping to make this problem solving a bit either.

I have some information being sent in from the controller.js, and it gets put in a <div><p>. I'd like to be able to fade in and out this div with a button and fade effect from Animate.css (Just using the fade as example).

When the page loads, it correctly displays "Hello World". Fade out and in works, except when it fades back in it returns {{results}} instead of Hello World.

Is there a proper way of making this work? Any help is appreciated! Thanks!

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="prApp">
    <head>
        <title>Test123</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8">
        <link rel="stylesheet" href="./css/animate.min.css">

        <script src="./bower_components/jquery/jquery.min.js"></script>
        <script src="lib/angular.min.js"></script>
        <script src="js/controllers.js"></script>
    </head>
    <body ng-controller="prCtrl" >
        <button type="button" onclick='$("#testDiv").addClass("animated fadeInUp");'>Fade In</button>
        <button type="button" onclick='$("#testDiv").addClass("animated fadeOutUp");'>Fade Out</button>
        <div id='testDiv'>
            <p>{{results}}</p>
        </div>
    </body>
</html>

Controller.js:

var prApp, prCtrl;

prApp = angular.module("prApp", []);

prApp.controller("prCtrl", prCtrl = function($scope, $rootScope) {
  $rootScope.results = 'Hello World!';
  return $scope.$apply();
});
Était-ce utile?

La solution

Check this plunker

It works.

I just add removeClass before addClass

<button type="button" onclick='$("#testDiv").removeClass().addClass("animated fadeInUp");'>Fade In</button>
<button type="button" onclick='$("#testDiv").removeClass().addClass("animated fadeOutUp");'>Fade Out</button>

and remove

return $scope.$apply();

Autres conseils

Why not use ng-animate and ng-class?

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top