i'm kind of new using AngularJs framework and i am not that good in English. so i hope somebody can help me solve my problem and never mind my grammar hehe. i know mostly of progress bar in angularjs triggered by ng-show, but what if i want to put a progress bar before an object tag loads. for example
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<object width="400" height="400" data="file.pdf"></object>
</div>
</div>
let assume that that "file.pdf" is being fetch from the server. that being said it needs time to load, so i want to put a progress bar on that time while the data if being fetch from the server and hide it when the object is fully loaded thank you guys.
data flow example :
(file.pdf) ----Fetching---- [controller]----Progress bar--View(html)
Hope this will help you out. This is a basic example for showing and hiding a spinner bar on button click.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style>
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin: 0 auto;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
html, body, container {
height: 100%;
width: 100%;
margin: 0;
}
</style>
</head>
<body ng-app="changeExample">
<div class="container" ng-controller="ExampleController">
<button class="btn" ng-click="ShowSpinner()">Show Spinner</button>
<button class="btn" ng-click="HideSpinner()">Hide Spinner</button>
<div ng-if="ShowSpinnerStatus" class="loader"></div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.ShowSpinnerStatus = true;
$scope.ShowSpinner = function(){
$scope.ShowSpinnerStatus = true;
};
$scope.HideSpinner = function(){
$scope.ShowSpinnerStatus = false;
};
}]);
</script>
</body>
</html>
You can show and hide the spinner on a service call like this.
$scope.ShowSpinner();
LoginService.authenticateUser(userName, password).then(
function(response){
$scope.HideSpinner();
if( response.isSuccess ){
// Login Success
}
else{
//Login Fail
}
},
function(error){
//Network related error
$scope.HideSpinner();
}
);
Your English is really good and you need not worry about it at all. Coming back to your question, you are on the right path. You would need to use ng-show or ng-hide, whatever you choose. Let's say you choose ng-show In your controller, you would declare a variable,
$scope.isProgessBarVisible = true;
and then, within the controller itself, upon return from http call from the server, you would set it to false.
$http.get('someUrl')
.then(function successCallback(response) {
//load you pdf file content
$scope.isProgessBarVisible = false;
}
And in the HTML
<div class="progress">
<div class="progress-bar" role="progressbar" ng-show="isProgessBarVisible" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<object width="400" height="400" data="file.pdf"></object>
</div>
With this in place, the progress bar will show up until the file is fetched from server and displayed.
I think the problem is not just about showing/hiding the progress bar, perhaps it is about how to hide the progress bar when the <object>'s content finish loading.
Initially, I tried to use ng-load on the <object> but somehow it didn't work. So I tried to use onload which does work. But since the onLoad() handler function is outside angular environment, I had to get back the angular scope to be able to set the variable $scope.showProgress that will hide the progress bar.
See the plunkr yourself, and let me know if that is what you are looking for.
Plunkr https://plnkr.co/edit/wxgetLZdST0WcPEHyraZ
Note: I don't know whether it is possible to get the progress status number (% loaded), but at least we can show "Loading..." or a spinner icon while the <object> is loading.
http://chieffancypants.github.io/angular-loading-bar/
angular.module('app', ['angular-loading-bar']);
angular-loading-bar is a good option for $http calls
Related
I am using Ionic and I can't find the solution for my problem. What I want to do, is to show some HTML before the screen is loaded. You can use the default $ionicLoading, but that just gives me an overlay, while I don't want that. I am a newbie to Angular and Ionic, so it might be a very simple question, but I just can't solve it.
To do so, I have added HTML to the screen I wanted it to be added. I made it like this:
<div class="preload-wrapper" ng-show="removeAfterLoad">
<p>Please wait, the page is being loaded </p>
</div>
And I know I need to use this, but I don't know how to bind it to the HTML I am using.
$ionicPlatform.ready(function removeAfterLoad () {
// I need to make sure that the HTML is only shown while the screen is being loaded.
// After it is loaded, I want to remove the HTML.
});
Is it something like $scope.hide I need to use. If so, how do I bind that to my HTML snippet?
I would recommend using ng-cloak
adding ng-cloak to a tag will hide it until the page is fulling loaded, and can be used in the inverse manner.
Step 1
Add this style between your <head> tag.
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
[ng-cloak].loading {
margin-top: 150px;
text-align: center;
display: block !important;
}
.loading {
display: none;
}
Step 2:
Add this to your index.html
<div class="loading" ng-cloak>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
<div class="container" ng-cloak>
.....content goes here
</div>
After the page has fully loaded, ng-cloak will add "hidden" to the loading div and display the container div.
It's Actually Quiet Simple:
Inside Your Controller, you need to add $ionicLoading as below -
$ionicLoading.show({
template: '<ion-spinner></ion-spinner> <br/> Please wait, the page is being loaded'
});
And Hide after the function is successfully Callback:
$ionicLoading.hide();
You can actually override $ionicLoading template/overlay with your own html code. Here are the docs: http://ionicframework.com/docs/api/service/$ionicLoading/
You can even override the default template for any view.
In your example you could do:
angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
$scope.show = function() {
$ionicLoading.show({
template: '<div class="preload-wrapper" ng-show="removeAfterLoad"> '+
'<p>Please wait, the page is being loaded </p> '+
'</div>',
duration: 3000,
//if you want to hide the background overlay
noBackdrop: true
}).then(function(){
console.log("The loading indicator is now displaying your html");
});
};
$scope.hide = function(){
$ionicLoading.hide().then(function(){
console.log("The loading indicator is now hidden");
});
};
});
An nice way to show and hide loading is using ionic view events: http://ionicframework.com/docs/api/directive/ionView/
$scope.$on("$ionicView.beforeLeave", function(event, data){
// show loading
});
$scope.$on("$ionicView.beforeEnter", function(event, data){
// hide loading
});
The problem I have - the content of an HTTP canvas disappears, when I have a tooltip on a button that opens a new tab.
This is a very specific symptom, so I'd try to walk you through it.
I'm able to reproduce it with the following HTML, but not in a plunker or jsfiddle unfortunately:
<html>
<head>
<style>
.container {
height: 300px;
width: 300px;
}
canvas {
border: 1px solid black
}
button {
margin-top: 15px;
}
</style>
</head>
<body ng-app="CanvasTooltipApp">
<div ng-controller="CanvasTooltipCtrl" class="container">
<canvas id="myCanvas" height="300"></canvas>
<button type="button" ng-click="clickMe()" tooltip="The Tooltip Text">Click Me</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script>
angular.module('CanvasTooltipApp', ['ui.bootstrap']);
angular.module('CanvasTooltipApp').config(function($tooltipProvider) {
$tooltipProvider.options({popupDelay: 1500});
});
angular.module('CanvasTooltipApp').controller('CanvasTooltipCtrl', function($scope) {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
$scope.clickMe = function() {
window.open('http://www.google.com', '_blank');
};
});
</script>
</body>
</html>
It is reproduced only on Chrome 49 on a Mac.
To reproduce: click on the button (before the tooltip appears!), a new tab would be opened. Wait a few secs. Perhaps open another new tab. Then close all tabs and go back to the original tab. The shape of the canvas should disappear.
I use AngularJS 1.3.15 and angular-ui-bootstrap 0.14.3.
It does not seem to be reproduced with a plain bootstrap tooltip.
Only with the angular-ui-bootstrap it is reproduced.
Upgrading the angular-ui-bootstrap version does not help.
It is not reproduced on other browsers, or on other OSs.
That's it, I think.
I hope you even succeed in reproducing it without a plunker/fiddle.
Thank you very much in any case!
Daniel
I've hit this myself, though in slightly different circumstances (Canvas disappearing on Chrome 49 on OS X, looks like a bug), and have a plunker:
https://plnkr.co/edit/z4x9i8qqfjTOJDxihaG4
Windowed mode (where the symptom manifests):
https://run.plnkr.co/gl9nbHY1044dEJUI/
HTML:
<div>
<div>
<input type="number" class="form-control" placeholder="Focus here" />
</div>
<div>
<div>
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series">
</canvas>
</div>
</div>
</div>
Looks like the same issue. I've filed a Chrome bug report.
I have the following angularjs application which loads content from Instagram, however, on page load I would like to fade the loaded content in with a smooth transition.
I added {{ loadedClass }} to the main HTML tag but it doesn't seem to place ng-enter within it when it loads:
HTML
<script src="bower_components/angular/angular-animate.js"></script>
<section ng-controller="ShowImages as images" class="page {{ loadedClass }}" ng-view>
CSS
.page.ng-leave {
-webkit-animation: fadeOut 0.6s both ease-in;
-moz-animation: fadeOut 0.6s both ease-in;
animation: fadeOut 0.6s both ease-in;
}
/* line 697, ../sass/app.scss */
.page.ng-enter {
-webkit-animation: fadeIn 2s both ease-in;
-moz-animation: fadeIn 2s both ease-in;
animation: fadeIn 2s both ease-in;
}
**Controller
var app = angular.module('instafeed', ['ngAnimate']);
app.filter('getFirstCommentFrom',function(){
return function(arr, user){
for(var i=0;i<arr.length;i++)
{
if(arr[i].from.username==user)
return arr[i].text;
}
return '';
}
})
What am I doing wrong?
See here:
http://machinas.com/wip/machinas/instagramfeed/
I get this console error:
Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- $animate <- $compile
http://errors.angularjs.org/1.2.22/$injector/unpr?p0=%24%24qProvider%20%3C-%20%24%24q%20%3C-%20%24animate%20%3C-%20%24compile
return new Error(message);
The class 'page' should go on each of your item, not the container:
<ul ng-show="layout == 'grid'" class="page grid">
<li></li>
</ul>
That is the ul who are entering and leaving when you change tabs, not the section
Knowing how events work, your ng-view is in the same level as ng-controller so when the event is emitted it doesn't "see" it. When events are emitted they are emmited to its parents.
I suggest the following in your HTML:
<section ng-controller="ShowImages as images" class="page {{ loadedClass }}" >
<div ng-view>
<!-- The rest of your code -->
</div>
</section>
EDIT
Sorry, I mislead you. I confused $emit with $broadcast.
EDIT 2
Looking at your HTML, you are not using ng-views correctly. The ng-views are supposed to be used together routes. That explains why the event is not firing. In your code, you are not loading a view at all.
EDIT 3
Look into animating the ng-cloak directive; you will be able to achieve just about the same result without views. What you are trying to do is not very complex and you seem to be starting out so I recommend skipping ng-view for now :)
I am not able to understand how the ngAnimate works exactly. here is my doubt.
1) ngAnimate - only works on directives?
2) how to make ng-animate work without the directive
3) Any of above way, how to add call back after animation complete?
Because i see all the animation examples only with directives.
I have a small demo here, any one help me to animation both without directive and with directive approach to simply adding a class name as `fade'?
my CODE:
<div class="container" ng-app="myApp">
<div class="content" ng-controller="count">
<h1 ng-click="animate()">Click ME</h1>
<h2>Let me Fade</h2>
</div>
</div>
<div class="container" ng-app="myApp">
<div class="content" ng-controller="count">
<h1 ng-click="animate()">Click ME</h1>
<h2>Let me Fade</h2>
</div>
</div>
Demo to update
I am not able to understand how the ngAnimate works exactly. here is
my doubt.
ngAnimate is a module that provides support for animations in angular apps. There are two ways to make use of animations when ngAnimate is used: by using CSS and JavaScript. For CSS based animations, angularjs adds a class ng-enter/ng-leave whenever an element is shown/removed from 'view'. You simply need to play with these classes to make the animation work!
Prerequisite:
You would need to add the library for angular-animate
<script src="ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.js">
</script>
and include ngAnimate as the dependency in your myApp module.
var myApp = angular.module('myApp', ['ngAnimate']);
1) ngAnimate - only works on directives?
Yes. You cannot use ngAnimate without directive.
According to documentation, following directives are "animation aware":
ngRepeat, ngView, ngInclude, ngSwitch, ngIf, ngClass,
ngShow, ngHide, ngModel, ngMessages and ngMessage
2) how to make ng-animate work without the directive
You cannot!. Remember, even ng-click is a directive
3) Any of above way, how to add call back after animation complete?
Yes, You can add a callback after the animation is complete using the $animate service(which would usually be done in a custom directive) and use $animate.leave(element, [options]);
Have a look at this example for triggering events after the animation ends.
Finally, here is the updated demo you mentioned in question.
You may toggle a flag to true/false with each click on <h1> and make content inside <h2> hide/show based on flag.
<div class="container" ng-app="myApp">
<div class="content" ng-controller="count">
<h1 ng-click="animate()">Click ME</h1>
<h2 ng-if="flag" class="fade">Let me Fade</h2>
</div>
</div>
Also, you'd need to handle fade-effect with css
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
.fade.ng-enter.ng-enter-active {
opacity:1;
}
.fade.ng-leave {
transition:0.5s linear all;
opacity:1;
}
.fade.ng-leave.ng-leave-active {
opacity:0;
}
Hope it helps!
<div class="container" ng-app="myApp">
<div class="content" ng-controller="count">
<h1 ng-click="animate()">Click ME</h1>
<h2 ng-if="clicked" class="animate-if">Let me Fade</h2>
</div>
I added a variable named clicked which is set to true or false to animate the Let me Fade Text
var myApp = angular.module('myApp', []);
myApp.controller('count', function($scope) {
$scope.clicked=false;
$scope.animate = function () {
$scope.clicked=!$scope.clicked;
}
});
In this JS file upon clicking the click me button the variable clicked is set to true or false .
**
h2.fade {
opacity : 0;
transition: opacity 1s ease-in-out;
}
.animate-enter, .animate-leave {
transition: 500ms ease-in all;
position: relative;
display: block;
}
.animate-enter.animate-enter-active, .animate-leave {
left: 0;
}
.animate-leave.animate-leave-active, .animate-enter {
left: 500px;
}
**
Here in the css file i added css for the class animate which acts upon clicked variable if the variable is true it goes for animate-enter-active
otherwise it goes for leave-active
What would be the best way to achieve a flip over effect using AngularJS animations?
I would like the flip over effect to occur on click. Every time it's clicked, it should flip over to the other side.
Ideally, I guess, I'm looking for a directive implementation that uses Angular animations.
PLNKR - here is a seed of a configurable angular directive that provides 3d flipping functionality. I do not see any good reason why to use ngAnimate for it.
basic usage
<flip flip-width="200px" flip-height="100px">
<flip-panel>
content-front
</flip-panel>
<flip-panel>
content-back
</flip-panel>
</flip>
Comments
It appends css-styles on its own, to be fully independent.
In a proper, generic directive all names should be configurable.
flip-width and flip-height sets style of flip and both flip-panels.
Directive makes some basic check, if both front and back are set.
First flip-panel is front and the second is back.
Due to usage of transclusion content of the flip-panel may be arbitrary html. (you are right Misha no transclusion needed)
It only works in -webkit. (update to make it work in Firefox, just duplicate all pieces with -webkit with no prefix - you do not need -moz)
UPDATE
PLNKR - here is an updated and extended version. It shows what I meant by making the directive configurable. In more details:
Introduced flipConfig via provider, that allows to set in app.config:
default dimensions
css class names
speed of the transition
if the flip action is triggered by a click on the panel
Introduced flip-show attribute that specifies which side to show.
Changing flip-show we can trigger the flip action from outside of the directive.
It works in Firefox and [almost:-)] in IE11.
(btw: it is just a seed and it may be improved in a lot of ways. E.g: specifying axis, specifying origin of the transform, specifying radius and margin of the panels, allowing flip on hover, defaults colors, margins and so on)
I had the same usecase just recently for an angular memory game.
My implementation is the same by the idea of the other answers. I also released the flipping code along with a DEMO.
Github: https://github.com/zwacky/angular-flippy
P.s.: Looks i'm late to the party ;)
You can use ng-click and ng-class to add a class when the flip container is clicked.
<div class="flip-container" ng-click="flip = !flip" ng-class="{'flip': flip}">
<div class="flipper">
<div class="front" style="background: lightblue;">
front
</div>
<div class="back" style="background: lightgreen;">
back
</div>
</div>
</div>
This is essentially the angular way of doing what Walsh suggested in his article:
Adding the flip class to the container element will flip the card using JavaScript -- no user hover required. A JavaScript comment like document.querySelector("#myCard").classList.toggle("flip") will do the flip!
The only change to David Walsh's css was removing the :hover selector - the html structure is unchanged. It works nicely in chrome and firefox.. but the flip isn't as pretty in IE.
Here is a working demo: http://plnkr.co/edit/0dn775vpuoOeh2PS1T6k?p=preview
Update
I created a simple directive to encapsulate this basic technique. It allows you to flip over a black card, to reveal a picture on the other side.
app.directive("flipReveal", function() {
return {
restrict: 'E',
replace: true,
templateUrl: 'template.html',
scope: {
url: '=',
flip: '='
}
}
})
Here is a link to a new demo: http://plnkr.co/X4pSav
Disclaimer Based on #artur's answer https://stackoverflow.com/a/23139242/1319998 , but hopefully both simplified and made more flexible.
A custom directive is the way to go, one that can be used as:
<flip flip-side="{{side}}">
<flip-front>
Front side contents
</flip-front>
<flip-back>
Rear contents
</flip-back>
</flip>
I think it should have certain properties:
Programatically controlled by an attribute. In this case, a string that is equal to 'front' or 'back'
<flip flip-side="{{side}}">....</flip>
this would allow programmatic access via the surrounding scope.
Integrated with ngAnimate/$animate. Specifically, if ngAnimate is removed or disabled, the animation should not occur, but the reveal of the other side happen immediately. Using $animate.addClass/$animate.removeClass would achieve this, adding/removing a flip-visible class together with display:block and display:none styles to make sure the right side is visible/hidden when the animations are disabled.
flip > flip-front, flip > flip-back {
display: none;
}
flip > .flip-visible {
display: block;
}
Controlled by CSS, with defaults. So if you want to change the duration of the flip, it's a CSS, and not a Javascript, addition.
So it will have a style sheet to add styles required for the various stages of $animate.addClass / $animate.removeClass CSS animations explained at Year of Moo and $animate docs . The class will be flip-visible, so the extra classes will be .flip-visible-add, .flip-visible-add-active, .flip-visible-remove, and .flip-visible-remove-active classes.
The full set of styles can be seen at http://plnkr.co/edit/bbYbMhiURnm6FqC9patp?p=preview, but the main construction is of the form:
.flip-visible-add {
// Initial setup: time and initial, pre-animation, transform
}
.flip-visible-add.flip-visible-add-active {
// Target transform
}
Putting all this together, the directive is quite short:
app.directive("flip", function($animate) {
return {
restrict : "E",
controller: function($scope, $element, $attrs) {
var elements = {
'front': $element.find('flip-front'),
'back': $element.find('flip-back')
};
$attrs.$observe('flipSide', function(visibleSide) {
visibleSide = visibleSide || 'front';
var otherSide = visibleSide == 'front' ? 'back' : 'front';
$animate.removeClass(elements[otherSide], 'flip-visible');
$animate.addClass(elements[visibleSide], 'flip-visible');
});
}
}
});
This can all be seen in an example, together with the stylesheets to make it all work, at http://plnkr.co/edit/bbYbMhiURnm6FqC9patp?p=preview
I realise there is a benefit to not integrating with the $animate service, and having a purely class-based solution.
If you use $animate with addClass and removeClass, but interrupt the animation (say, by clicking quickly and repeatedly on the element), the animation will 'jerk' to its end/starting point, and then animate from that position, at least on Chrome. Using a pure CSS solutions avoids this issue, and always animates from the exact current point, giving a smoother effect.
An added benefit is the solution is also simpler, and you don't need a custom directive.
For example, the HTML can be as follows:
<flip class="{{side === 'front' ? 'flip-front' : 'flip-back'}}">
<flip-front>
Front side contents
</flip-front>
<flip-back>
Rear contents
</flip-back>
</flip>
I use custom elements, but they don't need to have any directives attached: they are just for CSS to hook into:
flip > flip-front, flip > flip-back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* Time can be overriden */
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
/* Front visible */
flip > flip-front {
-webkit-transform: perspective(800px) rotateY(0);
transform: perspective(800px) rotateY(0);
}
flip > flip-back {
-webkit-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
/* Back visible */
flip.flip-back > flip-front {
-webkit-transform: perspective(800px) rotateY(-180deg);
transform: perspective(800px) rotateY(-180deg);
}
flip.flip-back > flip-back {
-webkit-transform: perspective(800px) rotateY(0);
transform: perspective(800px) rotateY(0);
}
This can be seen in a demo at http://plnkr.co/edit/A7IeGa1JEsZishmTDTaK?p=preview
I would simply add / remove a class on click.
If you want to hook into the angular animation system then take a look at the $animate service, in particular add/remove/setClass(). The service is usually used in directives. You might want to create a directive that reacts on a click event and triggers the animation. You even get informed when the animation has completed.
Chances are that it's not worth it ;)
You are going to want to create 3 divs.
<div class="wrapper">
<div class="front"></div>
<div class="back"></div>
</div>
You then position back behind front using z-index, and flip it upside down using rotateX (-180deg or so). Set a transition on wrapper as well.
Then, on click of wrapper, rotateX(+180deg). This will pretty much infinitely flip it over.
** Update: For angular, bind to click and use setClass to toggle between two classes on wrapper, one at rotateX(0deg) , the other at rotateX(180deg)
Here is a slightly modified version of artur's answer:
DEMO
angular.module('FlipDemo', []).directive("flip", function() {
return {
restrict : "A",
scope: true,
link: function(scope, element) {
var $panels = element.css({ position: 'relative' }).children().addClass("flip-panel");
var frontPanel = $panels.eq(0);
var backPanel = $panels.eq(1);
scope.showFrontPanel = function() {
frontPanel.removeClass("flip-hide-front-panel");
backPanel.addClass("flip-hide-back-panel");
};
scope.showBackPanel = function() {
backPanel.removeClass("flip-hide-back-panel");
frontPanel.addClass("flip-hide-front-panel");
};
scope.showFrontPanel();
}
}
});
.flip-panel {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transition: -webkit-transform .4s;
-moz-transition: -moz-transform .4s;
-webkit-transform: perspective(800px) rotateY(0deg);
-moz-transform: perspective(800px) rotateY(0deg);
}
.flip-hide-back-panel {
-webkit-transform: perspective(800px) rotateY(180deg);
-moz-transform: perspective(800px) rotateY(180deg);
}
.flip-hide-front-panel {
-webkit-transform: perspective(800px) rotateY(-180deg);
-moz-transform: perspective(800px) rotateY(-180deg);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="FlipDemo">
<div style="width: 100px; height: 150px">
<div flip style="width: 100%; height: 100%">
<div style="background-color: green">
<div>Front</div>
<button ng-click="showBackPanel()">Show Back</button>
</div>
<div style="background-color: blue">
<div>Back</div>
<button ng-click="showFrontPanel()">Show Front</button>
</div>
</div>
</div>
<br>
<div style="width: 150px; height: 100px">
<div flip style="width: 100%; height: 100%">
<div style="background-color: green">
<div>Front</div>
<button ng-click="showBackPanel()">Show Back</button>
</div>
<div style="background-color: blue">
<div>Back</div>
<button ng-click="showFrontPanel()">Show Front</button>
</div>
</div>
</div>
</body>
</html>
Main differences:
Works in Chrome and Firefox.
More flexibility with when the flip happens.
Just one directive rather than two. Less code.
I took the CSS outside of the directive for clarity sake.