fix(uiView): Properly handle uiView within a ngIf

Use the linking function element instead of the template element.

Closes angular-ui#857

src/viewDirective.js

@@ -70,16 +70,16 @@ function $ViewDirective(   $state,   $compile,   $controller,   $injector,   $ui
 
   var directive = {
     restrict: 'ECA',
-    compile: function (element, attrs) {
-      var initial   = element.html(),
+    compile: function (tElement, attrs) {
+      var initial   = tElement.html(),
           isDefault = true,
-          anchor    = angular.element($document[0].createComment(' ui-view-anchor ')),
-          parentEl  = element.parent();
+          anchor    = angular.element($document[0].createComment(' ui-view-anchor '));
 
-      element.prepend(anchor);
+      tElement.prepend(anchor);
 
-      return function ($scope) {
-        var inherited = parentEl.inheritedData('$uiView');
+      return function ($scope, element) {
+        var parentEl  = element.parent(),
+            inherited = parentEl.inheritedData('$uiView');
 
         var currentScope, currentEl, viewLocals,
             name      = attrs[directive.name] || attrs.name || '',

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,30 @@ 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);
+    }));
   });
 
   describe('autoscroll attribute', function () {
@@ -325,4 +349,4 @@ describe('uiView', function () {
     }))
   });
 
-});
+});