diff --git a/src/ng/directive/ngIf.js b/src/ng/directive/ngIf.js index 5ff889c2c857..6e845e289952 100644 --- a/src/ng/directive/ngIf.js +++ b/src/ng/directive/ngIf.js @@ -60,7 +60,7 @@ } /* - The transition styles can also be placed on the CSS base class above + The transition styles can also be placed on the CSS base class above */ .animate-if.ng-enter, .animate-if.ng-leave { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; @@ -92,16 +92,16 @@ var ngIfDirective = ['$animate', function($animate) { $scope.$watch($attr.ngIf, function ngIfWatchAction(value) { if (toBoolean(value)) { - - childScope = $scope.$new(); - transclude(childScope, function (clone) { - block = { - startNode: clone[0], - endNode: clone[clone.length++] = document.createComment(' end ngIf: ' + $attr.ngIf + ' ') - }; - $animate.enter(clone, $element.parent(), $element); - }); - + if (!childScope) { + childScope = $scope.$new(); + transclude(childScope, function (clone) { + block = { + startNode: clone[0], + endNode: clone[clone.length++] = document.createComment(' end ngIf: ' + $attr.ngIf + ' ') + }; + $animate.enter(clone, $element.parent(), $element); + }); + } } else { if (childScope) { diff --git a/test/ng/directive/ngIfSpec.js b/test/ng/directive/ngIfSpec.js index ce4de98c5f87..3173f476c39b 100755 --- a/test/ng/directive/ngIfSpec.js +++ b/test/ng/directive/ngIfSpec.js @@ -28,6 +28,22 @@ describe('ngIf', function () { expect(element.children().length).toBe(1); }); + it('should not add the element twice if the condition goes from true to true', function () { + $scope.hello = 'true1'; + makeIf('hello'); + expect(element.children().length).toBe(1); + $scope.$apply('hello = "true2"'); + expect(element.children().length).toBe(1); + }); + + it('should not recreate the element if the condition goes from true to true', function () { + $scope.hello = 'true1'; + makeIf('hello'); + element.children().data('flag', true); + $scope.$apply('hello = "true2"'); + expect(element.children().data('flag')).toBe(true); + }); + it('should create then remove the element if condition changes', function () { $scope.hello = true; makeIf('hello');