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

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

题

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();
});
有帮助吗？

解决方案

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

其他提示

Why not use ng-animate and ng-class?

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top