diff --git a/src/ng/directive/ngIf.js b/src/ng/directive/ngIf.js index 5ff889c2c857..704abfd70e17 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; @@ -89,10 +89,10 @@ var ngIfDirective = ['$animate', function($animate) { compile: function (element, attr, transclude) { return function ($scope, $element, $attr) { var block, childScope; + var previousValue = false; $scope.$watch($attr.ngIf, function ngIfWatchAction(value) { - if (toBoolean(value)) { - + function addChildren() { childScope = $scope.$new(); transclude(childScope, function (clone) { block = { @@ -101,9 +101,9 @@ var ngIfDirective = ['$animate', function($animate) { }; $animate.enter(clone, $element.parent(), $element); }); + } - } else { - + function removeChildren() { if (childScope) { childScope.$destroy(); childScope = null; @@ -114,6 +114,14 @@ var ngIfDirective = ['$animate', function($animate) { block = null; } } + + if (toBoolean(value) && !previousValue) { + previousValue = true; + addChildren(); + } else if (!toBoolean(value)) { + previousValue = false; + removeChildren(); + } }); }; } diff --git a/test/ng/directive/ngIfSpec.js b/test/ng/directive/ngIfSpec.js index ce4de98c5f87..30a187f22dbb 100755 --- a/test/ng/directive/ngIfSpec.js +++ b/test/ng/directive/ngIfSpec.js @@ -28,6 +28,12 @@ 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 () { + makeIf('true'); + makeIf('true'); + expect(element.children().length).toBe(1); + }); + it('should create then remove the element if condition changes', function () { $scope.hello = true; makeIf('hello');