I find it extremely difficult to make an animation in angular, comparing to jquery. There are so many versions of angular animation fadein and fadeout that I found them from blogs/ tutorials/ etc, some of them are on older version of angular. Angular's seems to be very inconsistent when a newer version of it comes out to replace the old ones. I can't see any standard way of doing it. Hence I don't know where to start.
I just to fade in a form or a html doc when the button is clicked.
html,
<button ng-click="loadInclude" >Load Include Form</button>
<div ng-include="'form.php'" ng-if="readyToLoadForm===true"></div>
angular,
var app = angular.module("myapp", ['ngAnimate']);
app.controller("FormController",function($scope) {
$scope.readyToLoadForm = false;
$scope.loadInclude = function(e) {
$scope.readyToLoadForm = true;
};
}
);
any ideas?
you can use a ng-show or ng-hide in this case
<div ng-show="readyToLoadForm" class="animate-show animate-hide">TEST HERE</div>
when using angular-animate.js angular will add and remove several classes to this item when showing and hiding. based on that classes we can set a css animation to the element.
here is a simple plunker
for ng-include animation
ng-leave .ng-leave-active .ng-enter-active classes add to the element. there is a little desc about classes added when animating. and that desc is from ngAnimate
here is the ng-enter demo Plunker
here is the reference for how the classes assigned to the element when animation elements in angularjs
Related
I have an ionic v1 app. I want to add a basic animation to an element when it gets added to the view via ng-repeat. Reading the docs, the element should have a ng-enter class I can use to add CSS animations but it doesn't.
ngAnimate is included with Ionic. I'm loading the module:
angular.module('app', [
'ionic',
'ngAnimate',
Here's view code which uses ng-repeat:
<div class="entry" ng-repeat="message in messages | orderBy:'-id'">{{message}}
</div>
When I dynamically add a message to $scope.messages it gets added to the view as you would expect but it does not contain the ng-enter class which according to the docs it should.
I'm using ionic version 1.3.3, Angular 1.5.3 and ngAnimate 1.5.3.
Here's a codepen showing the issue: https://codepen.io/jamesjacobs/pen/YQyaZq
What am I missing? Thanks.
Here is how to use ngAnimate with ionic
in view
<ion-item class="chat-item item-remove-animate item-avatar item-icon-right" ...
css
If you want to use it with chat-item class use it as below
.chat-item.ng-enter {
-webkit-animation: fadeInLeft 1s;
animation: fadeInLeft 1s;
}
above code will animate whole list at a once. If you want to animate each item one by one use ng-enter-stagger with delay 200ms
.chat-item.ng-enter-stagger {
-webkit-animation-delay:200ms;
animation-delay:200ms;
/* override to make sure it's not inherited from other styles */
-webkit-animation-duration:0;
animation-duration:0;
}
Demo
I have a directive which contains an iScroll element, which is built with li from an ng-repeat:
<div class="my-film">
<div class="filmstrip-container">
<div class="scroll-wrapper">
<ul class="film-container">
<li ng-repeat="film in films"
ng-mouseover="onMouseOverItem($event)"
ng-mouseleave="onMouseLeaveItem($event)"
ng-click="openFilm()"
class='film-slide'>
...nested videos etc in here.
</li>
</ul>
</div>
</div>
</div>
In the directive's link function I have the onClick function like this
scope.openFilm = function() {
...code to open the film and play
}
This is working totally as expected on desktop, but when on Touchscreen (testing on an iPad) the openFilm() function is never called, however, the element does get the ng-click-active class applied.
I do have other event listeners on the li elements, but removing these didn't make any difference. Could it be something to do with iScroll?
We're using Angular 1.3, and have ngTouch added.
Try installing <script src="angular-touch.js"> provide dependency while initializing your app angular.module('app', ['ngTouch']); Hope this will help you. pleasae refer this page link
The problem here was the iScroll blocking my touch events. Passing {click: true} in as the options when initiating the iScroll fixed the problem.
iOS creates separate events for ng-mouseover, ng-click, ng-mouseleave, etc.
That means that your first tap will trigger ng-mouseover, your second tap will trigger ng-click, and your tap outside the element will trigger ng-mouseleave.
Saddly, I thought ngTouch would fix this issue created by iOS but it didn't. It fixed it only if you use css hover, but not if you use java script mouse events (including those of angular).
I would like to add an iframe to a page when certain links are clicked and remove it when other mouse events happen on the page. From what I can see, it seems that using an AngularJS directive would be the best way to do this. What I'm not sure about is what is the best way to format the directive. I'm thinking of making the directive at the attribute level...something like this:
<div myIframeDirective></div>
What I'm not sure of is the best way of removing/adding the directive contents (an iframe and a header above it) when various click events happen on the main page. Not looking for anyone to write the code for me...just looking for examples of how this can be best accomplished.
You should be using ng-if.
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
Here's a working example:
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
</div>
In Angular, ng-if will remove the iframe from the DOM if it is false.
This means the URL will NOT be requested until ng-if is true.
<iframe ng-if="frameDisplayed" ng-src="{{src}}"></iframe>
And use the link
Toggle
Then in your controller, you can control what your iframe display:
$scope.src = 'https://angularjs.org';
I just need to make a div fullscreen whenever a user clicks on that div. I know this can be done via javascript and jquery. But i want to know if there is any pure angular js method of doing it. Any suggestions in this regard would be appreciated
You can use a fullscreen directive like this ones:
https://github.com/hrajchert/angular-screenfull
https://github.com/fabiobiondi/angular-fullscreen
One way is to use ngClass to apply a fullscreen class based on a boolean scope property. And use ngClick to toggle the scope property when clicked...
<div ng-click="isFullScreen = !isFullScreen"
ng-class="{fullscreen: isFullScreen}">click me</div>
Fiddle
Making a div fullscreen is(should be) about css, so you can change your div's css class via angular like:
html
<div ng-class="{fullScreenDiv: isFullScreen}">...</div>
<div ng-click="makeFullScreen()"></div>
js
$scope.isFullScreen = false;
$scope.makeFullScreen = function(){
$scope.isFullScreen = true;
};
fullScreenDiv is css class and isFullScreen is a variable in your controller scope. Change isFullScreen variable to enable/disable full screen.
Meaining of ng-class="{fullScreenDiv: isFullScreen}" is if isFullScreen expression evaluates to true then apply fullScreenDiv css class to element.
I used button click to change the route to the next page. Angular JS retain the scroll position and doesn't scroll to the top of the ng-view.
1. Disabling $anchorScroll doesn't work
2. Using window scroll to doesn't work
$rootScope.on("$routeChangeSuccess", function(){
window.scrollTo(0,90);
})
However, to keep the fix header on iPad, the following window scroll works.
$(document).on('blur', 'input, textarea', function() {
setTimeout(function() {
window.scrollTo(document.body.scrollLeft,document.body.scrollTop);
}, 0);
});
Any suggestions? How to clear the stored scroll positions by angualar js view?
What you want is not disable anchorscroll, but enable it. You can achieve what you want using the following code:
<div data-ng-view data-autoscroll="true"></div>
or:
<div data-ng-view data-autoscroll></div>
as pointed in the AngularJS docs.
Minor update to #Rafael's answer.
Since Angular 1.3.14 you can use simpler syntax to enable autoscroll to the top when switching views with ngView:
<div ngView autoscroll></div>
Angular Docs
Have you tried setting autoscroll to false on your ng-view element?
<div data-ng-view data-autoscroll="false"></div>