fix(uiView): Properly handle uiView within a ngIf

Use the linking function element instead of the template element.

Closes angular-ui#857

Author: Cody Lundquist

src/viewDirective.js

@@ -137,31 +137,34 @@ function $ViewDirective(   $state,   $compile,   $controller,   $injector,   $ui
 
   // Returns a set of DOM manipulation functions based on whether animation
   // should be performed
-  function getRenderer(element, attrs, scope) {
+  function getRenderer(attrs, scope) {
     var statics = function() {
       return {
-        leave: function (element) { element.remove(); },
-        enter: function (element, parent, anchor) { anchor.after(element); }
+        enter: function (element, target, cb) {
+          target.after(element);
+          target.remove();
+          if (typeof cb === 'function') cb();
+        },
+        leave: function (element, cb) {
+          element.remove();
+          if (typeof cb === 'function') cb();
+        }
       };
     };
 
     if ($animate) {
-      return function(shouldAnimate) {
-        return !shouldAnimate ? statics() : {
-          enter: function(element, parent, anchor) { $animate.enter(element, null, anchor); },
-          leave: function(element) { $animate.leave(element, function() { element.remove(); }); }
-        };
+      return {
+        enter: function(element, target, cb) { $animate.enter(element, null, target, cb || angular.noop); },
+        leave: function(element, cb) { $animate.leave(element, cb || angular.noop); }
       };
     }
 
     if ($animator) {
       var animate = $animator && $animator(scope, attrs);
 
-      return function(shouldAnimate) {
-        return !shouldAnimate ? statics() : {
-          enter: function(element, parent, anchor) { animate.enter(element, parent); },
-          leave: function(element) { animate.leave(element.contents(), element); }
-        };
+      return {
+        enter: function(element, target, cb) { animate.enter(element, target, cb || angular.noop); },
+        leave: function(element, cb) { animate.leave(element.contents(), element, cb || angular.noop); }
       };
     }
 
@@ -170,118 +173,130 @@ function $ViewDirective(   $state,   $compile,   $controller,   $injector,   $ui
 
   var directive = {
     restrict: 'ECA',
-    compile: function (element, attrs) {
-      var initial   = element.html(),
-          isDefault = true,
-          anchor    = angular.element($document[0].createComment(' ui-view-anchor ')),
-          parentEl  = element.parent();
-
-      element.prepend(anchor);
-
-      return function ($scope) {
-        var inherited = parentEl.inheritedData('$uiView');
-
-        var currentScope, currentEl, viewLocals,
-            name      = attrs[directive.name] || attrs.name || '',
-            onloadExp = attrs.onload || '',
-            autoscrollExp = attrs.autoscroll,
-            renderer  = getRenderer(element, attrs, $scope);
-
-        if (name.indexOf('@') < 0) name = name + '@' + (inherited ? inherited.state.name : '');
-        var view = { name: name, state: null };
-
-        var eventHook = function () {
-          if (viewIsUpdating) return;
-          viewIsUpdating = true;
-
-          try { updateView(true); } catch (e) {
-            viewIsUpdating = false;
-            throw e;
-          }
+    terminal: true,
+    priority: 400,
+    transclude: 'element',
+    link: function (scope, $element, attrs, ctrl, $transclude) {
+      var currentScope, currentEl, previousEl, viewLocals,
+          onloadExp     = attrs.onload || '',
+          autoscrollExp = attrs.autoscroll,
+          renderer      = getRenderer(attrs, scope),
+          parentEl      = $element.parent(),
+          inherited     = parentEl.inheritedData('$uiView'),
+          name          = attrs[directive.name] || attrs.name || '';
+
+      if (name.indexOf('@') < 0) name = name + '@' + (inherited ? inherited.state.name : '');
+
+      var eventHook = function () {
+        if (viewIsUpdating) return;
+
+        viewIsUpdating = true;
+
+        try { updateView(); } catch (e) {
+          throw e;
+        } finally {
           viewIsUpdating = false;
-        };
-
-        $scope.$on('$stateChangeSuccess', eventHook);
-        $scope.$on('$viewContentLoading', eventHook);
+        }
+      };
 
-        updateView(false);
+      scope.$on('$stateChangeSuccess', eventHook);
+      scope.$on('$viewContentLoading', eventHook);
+      updateView();
 
-        function cleanupLastView() {
-          if (currentEl) {
-            renderer(true).leave(currentEl);
-            currentEl = null;
-          }
+      function cleanupLastView() {
+        if (previousEl) {
+          previousEl.remove();
+          previousEl = null;
+        }
 
-          if (currentScope) {
-            currentScope.$destroy();
-            currentScope = null;
-          }
+        if (currentScope) {
+          currentScope.$destroy();
+          currentScope = null;
         }
 
-        function updateView(shouldAnimate) {
-          var locals = $state.$current && $state.$current.locals[name];
+        if (currentEl) {
+          renderer.leave(currentEl, function() {
+            previousEl = null;
+          });
 
-          if (isDefault) {
-            isDefault = false;
-            element.replaceWith(anchor);
-          }
+          previousEl = currentEl;
+          currentEl = null;
+        }
+      }
 
-          if (!locals) {
-            cleanupLastView();
-            currentEl = element.clone();
-            currentEl.html(initial);
-            renderer(shouldAnimate).enter(currentEl, parentEl, anchor);
+      function updateView() {
+        var newScope  = scope.$new(),
+            locals    = $state.$current && $state.$current.locals[name];
 
-            currentScope = $scope.$new();
-            $compile(currentEl.contents())(currentScope);
-            return;
-          }
+        if (locals === viewLocals) return; // nothing to do
 
-          if (locals === viewLocals) return; // nothing to do
+        viewLocals = locals;
 
+        var clone = $transclude(newScope, function(clone) {
+          clone.data('$uiViewName', name);
+          renderer.enter(clone, currentEl || $element, function onUiViewEnter () {
+            if (!angular.isDefined(autoscrollExp) || !autoscrollExp || scope.$eval(autoscrollExp)) {
+              $uiViewScroll(clone);
+            }
+          });
           cleanupLastView();
+        });
+
+        currentEl = clone;
+        currentScope = newScope;
+
+        /**
+         * @ngdoc event
+         * @name ui.router.state.directive:ui-view#$viewContentLoaded
+         * @eventOf ui.router.state.directive:ui-view
+         * @eventType emits on ui-view directive scope
+         * @description           *
+         * Fired once the view is **loaded**, *after* the DOM is rendered.
+         *
+         * @param {Object} event Event object.
+         */
+        currentScope.$emit('$viewContentLoaded');
+        if (onloadExp) currentScope.$eval(onloadExp);
+      }
+    }
+  };
 
-          currentEl = element.clone();
-          currentEl.html(locals.$template ? locals.$template : initial);
-          renderer(true).enter(currentEl, parentEl, anchor);
+  return directive;
+}
 
-          currentEl.data('$uiView', view);
+$ViewDirectiveFill.$inject = ['$compile', '$controller', '$state'];
+function $ViewDirectiveFill ($compile, $controller, $state) {
+  var directive = {
+    restrict: 'ECA',
+    priority: -400,
+    compile: function(tElement) {
+      var initial = tElement.html();
 
-          viewLocals = locals;
-          view.state = locals.$$state;
+      return function(scope, $element) {
+        var current = $state.$current,
+            name    = $element.data('$uiViewName'),
+            locals  = current && current.locals[name];
 
-          var link = $compile(currentEl.contents());
+        if (! locals) {
+          return;
+        }
 
-          currentScope = $scope.$new();
+        $element.data('$uiView', { name: name, state: locals.$$state });
+        $element.html(locals.$template ? locals.$template : initial);
 
-          if (locals.$$controller) {
-            locals.$scope = currentScope;
-            var controller = $controller(locals.$$controller, locals);
-            if ($state.$current.controllerAs) {
-              currentScope[$state.$current.controllerAs] = controller;
-            }
-            currentEl.children().data('$ngControllerController', controller);
-          }
+        var link = $compile($element.contents());
 
-          link(currentScope);
-
-          /**
-           * @ngdoc event
-           * @name ui.router.state.directive:ui-view#$viewContentLoaded
-           * @eventOf ui.router.state.directive:ui-view
-           * @eventType emits on ui-view directive scope
-           * @description           *
-           * Fired once the view is **loaded**, *after* the DOM is rendered.
-           *
-           * @param {Object} event Event object.
-           */
-          currentScope.$emit('$viewContentLoaded');
-          if (onloadExp) currentScope.$eval(onloadExp);
-
-          if (!angular.isDefined(autoscrollExp) || !autoscrollExp || $scope.$eval(autoscrollExp)) {
-            $uiViewScroll(currentEl);
+        if (locals.$$controller) {
+          locals.$scope = scope;
+          var controller = $controller(locals.$$controller, locals);
+          if (current.controllerAs) {
+            scope[current.controllerAs] = controller;
           }
+          $element.data('$ngControllerController', controller);
+          $element.children().data('$ngControllerController', controller);
         }
+
+        link(scope);
       };
     }
   };
@@ -290,3 +305,4 @@ function $ViewDirective(   $state,   $compile,   $controller,   $injector,   $ui
 }
 
 angular.module('ui.router.state').directive('uiView', $ViewDirective);
+angular.module('ui.router.state').directive('uiView', $ViewDirectiveFill);

test/viewDirectiveSpec.js

@@ -82,7 +82,7 @@ describe('uiView', function () {
     controller: function() {
       this.someProperty = "value"
     },
-    controllerAs: "vm",
+    controllerAs: "vm"
   };
 
   beforeEach(module(function ($stateProvider) {
@@ -275,6 +275,39 @@ describe('uiView', function () {
       // verify if the initial view has been updated
       expect(elem.find('li').length).toBe(scope.items.length);
     }));
+
+    // related to issue #857
+    it('should handle ui-view inside ng-if', inject(function ($state, $q, $compile, $animate) {
+      elem.append($compile('<div ng-if="someBoolean"><ui-view></ui-view></div>')(scope));
+
+      scope.someBoolean = false;
+
+      $state.transitionTo(aState);
+      $q.flush();
+      if ($animate) $animate.flush();
+
+      // Verify there is no ui-view in the DOM
+      expect(elem.find('ui-view').length).toBe(0);
+
+      // Turn on the div that holds the ui-view
+      scope.$apply(function() {
+        scope.someBoolean = true;
+      });
+
+      if ($animate) $animate.flush();
+
+      // Verify that the ui-view is there and it has the correct content
+      expect(elem.find('ui-view').text()).toBe(aState.template);
+
+      scope.$apply(function() {
+        scope.someBoolean = false;
+      });
+
+      if ($animate) $animate.flush();
+
+      // Verify there is no ui-view in the DOM
+      expect(elem.find('ui-view').length).toBe(0);
+    }));
   });
 
   describe('autoscroll attribute', function () {
@@ -325,4 +358,4 @@ describe('uiView', function () {
     }))
   });
 
-});
+});