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