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

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

Pregunta

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();
});
¿Fue útil?

Solución

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();

Otros consejos

Why not use ng-animate and ng-class?

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top