Skip to content

Commit b627e0c

Browse files
committed
added doAnimate to ui-view so when child views are loaded along with parent views, they get animated as a hole and not individually
1 parent 9690f83 commit b627e0c

File tree

4 files changed

+14
-10
lines changed

4 files changed

+14
-10
lines changed

.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,6 @@ build
55
node_modules
66
.DS_Store
77
*~
8+
9+
# webstorm files
10+
.idea

sample/contacts.detail.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@ <h2>{{contact.name}}</h2>
66
<a href="#/contacts/{{contact.id}}/item/{{item.id}}">{{item.type}}</a>
77
</li>
88
</ul>
9-
<div ui-view></div>
9+
<div ui-view ng-animate="{enter:'fade-enter'}"></div>
1010
</div>

sample/contacts.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,5 @@
1414
<div ui-view="menu"></div>
1515
</div>
1616
</div>
17-
<div class="span9" ui-view></div>
17+
<div class="span9" ui-view ng-animate="{enter:'fade-enter'}"></div>
1818
</div>

src/viewDirective.js

+9-8
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ function $ViewDirective( $state, $compile, $controller, $injector, $an
99
terminal: true,
1010
link: function(scope, element, attr) {
1111
var viewScope, viewLocals,
12-
name = attr[directive.name] || attr.name || '',
13-
onloadExp = attr.onload || '',
14-
animate = $animator && $animator(scope, attr);
12+
name = attr[directive.name] || attr.name || '',
13+
onloadExp = attr.onload || '',
14+
doAnimate = isDefined($animator),
15+
animate = $animator(scope, attr);
1516

1617
// Find the details of the parent view directive (if any) and use it
1718
// to derive our own qualified view name, then hang our own details
@@ -21,16 +22,16 @@ function $ViewDirective( $state, $compile, $controller, $injector, $an
2122
var view = { name: name, state: null };
2223
element.data('$uiView', view);
2324

24-
scope.$on('$stateChangeSuccess', updateView);
25-
updateView();
25+
scope.$on('$stateChangeSuccess', function() { updateView(doAnimate); });
26+
updateView(false);
2627

27-
function updateView() {
28+
function updateView(doAnimate) {
2829
var locals = $state.$current && $state.$current.locals[name];
2930
if (locals === viewLocals) return; // nothing to do
3031

3132
// Destroy previous view scope and remove content (if any)
3233
if (viewScope) {
33-
if (animate) animate.leave(element.contents(), element);
34+
if (doAnimate) animate.leave(element.contents(), element);
3435
else element.html('');
3536

3637
viewScope.$destroy();
@@ -42,7 +43,7 @@ function $ViewDirective( $state, $compile, $controller, $injector, $an
4243
view.state = locals.$$state;
4344

4445
var contents;
45-
if (animate) {
46+
if (doAnimate) {
4647
contents = angular.element('<div></div>').html(locals.$template).contents();
4748
animate.enter(contents, element);
4849
} else {

0 commit comments

Comments
 (0)