Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Fix ngAnimateChildren + ngIf, add docs for the directive #13876

Closed
Narretz wants to merge 2 commits into from
Closed

Fix ngAnimateChildren + ngIf, add docs for the directive #13876

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c2747b
fix(ngAnimateChildren): allow it to work on ngIf
Narretz Jan 28, 2016
79ad319
docs(ngAnimateChildren) add docs
Narretz Jan 28, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 93 additions & 8 deletions src/ngAnimate/animateChildrenDirective.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,100 @@
'use strict';

var $$AnimateChildrenDirective = [function() {
return function(scope, element, attrs) {
var val = attrs.ngAnimateChildren;
if (angular.isString(val) && val.length === 0) { //empty attribute
element.data(NG_ANIMATE_CHILDREN_DATA, true);
} else {
attrs.$observe('ngAnimateChildren', function(value) {
/**
* @ngdoc directive
* @name ngAnimateChildren
* @restrict AE
* @element ANY
*
* @description
*
* ngAnimateChildren allows you to specify that children of this element should animate even if any
* of the children's parents are currently animating. By default, when an element has an active `enter`, `leave`, or `move`
* (structural) animation, children elements that also have an active structural animation are not animated.
Copy link
Copy Markdown
Member

@gkalpak gkalpak Jan 28, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think child elements sounds better.

*
* Note that even if `ngAnimteChildren` is set, no child animations will run when the parent element is removed from the DOM (`leave` animation),
Copy link
Copy Markdown
Member

@gkalpak gkalpak Jan 28, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a , (comma) at the end. Wrong punctuation or is something missing ? :)

*
*
* @param {string} ngAnimateChildren If the value is empty, `true` or `on`,
* then child animations are allowed. If the value is `false`, child animations are not allowed.
*
* @example
* <example module="ngAnimateChildren" name="ngAnimateChildren" deps="angular-animate.js" animations="true">
<file name="index.html">
<div ng-controller="mainController as main">
<label>Show container? <input type="checkbox" ng-model="main.enterElement" /></label>
<label>Animate children? <input type="checkbox" ng-model="main.animateChildren" /></label>
<hr>
<div ng-animate-children="{{main.animateChildren}}">
<div ng-if="main.enterElement" class="container">
List of items:
<div ng-repeat="item in [0, 1, 2, 3]" class="item">Item {{item}}</div>
</div>
</div>
</div>
</file>
<file name="animations.css">

.container.ng-enter,
.container.ng-leave {
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
Copy link
Copy Markdown
Member

@gkalpak gkalpak Jan 28, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's more readable (and consistent) with a space after : (here and below).

}

.container.ng-enter,
.container.ng-leave.ng-leave-active {
opacity:0;
}

.container.ng-leave,
.container.ng-enter.ng-enter-active {
opacity:1;
}

.item {
background: firebrick;
color: #FFF;
margin-bottom: 10px;
}

.item.ng-enter,
.item.ng-leave {
transition: transform 1.5s ease;
}

.item.ng-enter {
transform: translateX(50px);
}

.item.ng-enter-active {
transform: translateX(0);
}
</file>
<file name="script.js">
angular.module('ngAnimateChildren', ['ngAnimate'])
.controller('mainController', function() {
this.animateChildren = false;
this.enterElement = false;
});
</file>
</example>
*/
var $$AnimateChildrenDirective = ['$interpolate', function($interpolate) {
return {
link: function(scope, element, attrs) {
var val = attrs.ngAnimateChildren;
if (angular.isString(val) && val.length === 0) { //empty attribute
element.data(NG_ANIMATE_CHILDREN_DATA, true);
} else {
// Interpolate and set the value, so that it is available to
// animations that run right after compilation
setData($interpolate(attrs.ngAnimateChildren)(scope));
Copy link
Copy Markdown
Member

@gkalpak gkalpak Jan 28, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It could also be val instead of attrs.ngAnimateChildren.

attrs.$observe('ngAnimateChildren', setData);
}

function setData(value) {
value = value === 'on' || value === 'true';
element.data(NG_ANIMATE_CHILDREN_DATA, value);
});
}
}
};
}];
16 changes: 16 additions & 0 deletions test/ngAnimate/animateSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1492,6 +1492,22 @@ describe("animations", function() {
dealoc(element);
dealoc(child);
}));

it('should respect the value if the directive is on an element with ngIf',
inject(function($animate, $rootScope, $rootElement, $compile) {
Copy link
Copy Markdown
Member

@gkalpak gkalpak Jan 28, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is $animate needed here ?


parent.attr('ng-animate-children', 'true');
parent.attr('ng-if', 'true');
element.attr('ng-if', 'true');

$rootElement.append(parent);
parent.append(element);

$compile(parent)($rootScope);
$rootScope.$digest();

expect(captureLog.length).toBe(2);
}));
});

describe('.pin()', function() {
Expand Down