I wrote a directive which displays a list of elements. After list change the old list moves to the left followed by the new one. To achieve this behavior use ng-repeat directive and css3 transitions. I noticed that animations classes(ng-animate ng-enter ng-animate-start ng-animate-active ng-enter-active) are not beeing removed after animation end and the old node ceated by ng-repeat loop is also not removed.
Example in plunker: http://plnkr.co/edit/gqRIIUJF55NNvlt9lqMz?p=preview
The problem occurs in firefox. Under chrome everything is fine.
I would be grateful if you tell me what I'm doing wrong, or if it is a angular issue.
That's because the ng-animate/ng-animate-start... are removed since angularjs v1.2.0 so you don't need to use them, check the docs or this example by kevin-smets.
Related
I'm using Angular 2 - RC3.
My problem is, I have an item which is shown or hidden using a *ngIf.
When the item is getting shown or hidden I want to apply an animation.
I'am able to apply an animation when the item first shows simply by adding a class. But the problem is when it's getting removed, the item gets removed from the screen before the animation can start/finish.
I know you can overcome this by setting a timer to delay removing action so that the animation can finish. But I don't want to put timers everywhere I need this functionality.
Is there an easier way in Angular to achieve this?
I don't want to use JQuery is either.
Use [hidden] directive on your element, as it does not prevent the element from rendering like *ngIf does.
[hidden] mean it takes up space in your DOM document but it's display is set to : none !important.
*ngIf on the other hand removes the element from the DOM completly
I have a list repeated in DOM with ng-repeat. The rows have transition property defined on them in CSS. At times after some manipulation to the repeated list, stale nodes remain in the DOM which look like following:
These have animation classes (ng-animate, ng-leave etc) on them so it looks like animation is in progress on them. And when I hover on those nodes, they go away immediately.
Anyone facing such issue?
Edit
This was a bug in angular which has been solved in 1.2.15.
https://github.com/angular/angular.js/issues/6748
Solved now :)
This was a bug in angular-animate module which has been solved in 1.2.15.
https://github.com/angular/angular.js/issues/6748
For the curious, this was the fix: https://github.com/angular/angular.js/commit/ff5cf736e5b8073c8121295743873ccd04cc7d6b
I'm required to populate my bootstrap powered left navigation based on permissions stored in database.
Permission based menu data set will be fed from web api
So i tried to extend http://jsfiddle.net/kmussel/evXFZ/ directives to change my static menu to dynamic menu .
Everything goes well except collapse functionality is not working as expressions for dynamic ids for data-target is not evaluated somehow.
I have created http://jsfiddle.net/jaimini/gKnJ2/1/ ti mimic the issue I'm facing.
data-target="{{node.id}}"
is not evaluated and hence expand/collapse is not working.
I have also added hardcoded IDs in 2nd menu to show that my approach will work if the expression is evaluated as required.
Manage to solve the issue by removing target attribute from parent link.
updated the fiddle and now its working as per my need.
please note that for proper functioning of bootstrap collapse plugin
data-target="{{\'#navigation\'+node.id}}"
would be required.
This jsfiddle is like yours, it use recursive ng-repeat. The googgle discussion about rendering tree like structure is here.
The different between ng-if ng-switch to ng-show ng-hide is, ng-if will not render the html
if the condition not met rather than render those elements that is hidden but taking up
resources. It is not evident for menus because there are not alot of binding/watches use. But
imagine you have render 5 - 6 tabs with lots of form data.
Question: Is there a bug in angular-strap? Or do I misunderstand how Angular works, and this is expected?
I've created a plunker to demonstrate the behavior.
What I want:
I want to show a different tooltip for each item in an ng-repeat.
Behavior I'm seeing:
Under certain conditions, the tooltip content is not properly inserted into the content template. Thus you only see the template, and not the content template or content itself.
Conditions:
When the page is first loaded, the tooltips work as expected.
When an item is added to the ng-repeat, its tooltip does not populate the template's content section.
If the page starts off with zero items in the ng-repeat, the tooltip in the first item added will work as expected. Items added after that will exhibit the problem.
Regardless of how many items the ng-repeat starts with, any removal of any item from it will make all items added in the future not have working tooltips.
Thoughts: If I boil it down, the "first load" works fine. After that, it doesn't. I'd guess that what happens is that there's a compilation step happening after the first round of adding items into ng-repeat. At that point, the angular-strap tooltip code sees the directive attributes, and sets up those tooltips and the content template. Subsequent changes to the ng-repeat are missed by angular-strap (even though I can see in the console that the call from bs-popover=tooltip(item) does actually run each time the ng-repeat list is updated). But I'm still stumped and wondering if this is behavior I can get around.
How do I allow dynamic tooltips in items added to an ng-repeat?
This seems to work in _popover.html
<div class="popover-content">{{content}}</div>
That is using {{ }} instead of ng-bind...works very odd.
Upon further investigation... Its probably happening somewhere around here:
https://github.com/mgcrea/angular-strap/blob/master/src/tooltip/tooltip.js#L83
Though I don't know where/how/what yet.
Update
So the bug (in Angular-Strap) is with caching your template. Initial retrieval (via http) works fine. But it caches them as an array, and upon retrieval from cache (subsequent additions) it gets an array. Which doesn't have a .data property so your template is empty, and your ng-bind is removed..
I'm having difficulty getting a css animation for movement in an angular ng-repeat list. I have a plunker here: http://plnkr.co/edit/KIcTiJ?p=preview
As you can see, the ng-enter animation is processed when the plunker is first loaded. However, I can't find any way to have an animation get triggered for list movement. In the example, by clicking on the arrows, the ng-hide is processed, and I would expect the ng-move animation to be triggered, but I'm wondering if I'm misunderstanding how the ng-repeat move animation is triggered.
In either case, can anyone suggest a better way for me to get angular 1.2 animations applied to this list when I click the left and right arrows in that example? I have tried alternate methods of generating the ng-repeat (I could use an angular filter instead of an ng-hide), and I've tried different css transitions, but I can't seem to get anything to work. Any advice here would be greatly appreciated on how to progress.
Sorry if this question seems like a repeat, but I looked through similar questions on stackoverflow, but the only other answers I could find were for the older angular animation framework, or suggested custom javascript animation, which I was hoping to avoid.
ng-repeat animation work if the collection has changed. You can use $filter to reflect your change in the collection.
<li ng-class="{'text-danger': item == f}" ng-repeat="item in items| filter: filteredData" class="animate-repeat">
<span>{{item}}</span>
</li>
Here filteredData is a controller function which execute your filter logic. (you can write custom filter as well)
$scope.filteredData = function(item) {
return (Math.abs($scope.f - item) < 2);
}
Check the updated Plunker how animation works.