fixed issue #435

Author: adambabik

src/viewDirective.js

@@ -9,13 +9,15 @@ function $ViewDirective(   $state,   $compile,   $controller,   $injector,   $an
   var directive = {
     restrict: 'ECA',
     terminal: true,
+    priority: 1000,
     transclude: true,
     compile: function (element, attr, transclude) {
       return function(scope, element, attr) {
         var viewScope, viewLocals,
             name = attr[directive.name] || attr.name || '',
             onloadExp = attr.onload || '',
-            animate = isDefined($animator) && $animator(scope, attr);
+            animate = isDefined($animator) && $animator(scope, attr),
+            initialView = transclude(scope);
 
         // Returns a set of DOM manipulation functions based on whether animation
         // should be performed
@@ -42,7 +44,7 @@ function $ViewDirective(   $state,   $compile,   $controller,   $injector,   $an
         };
 
         // Put back the compiled initial view
-        element.append(transclude(scope));
+        element.append(initialView);
 
         // Find the details of the parent view directive (if any) and use it
         // to derive our own qualified view name, then hang our own details
@@ -86,7 +88,7 @@ function $ViewDirective(   $state,   $compile,   $controller,   $injector,   $an
             view.state = null;
 
             // Restore the initial view
-            return render.restore(transclude(scope), element);
+            return render.restore(initialView, element);
           }
 
           viewLocals = locals;

test/viewDirectiveSpec.js

@@ -50,6 +50,14 @@ describe('uiView', function () {
         template: 'hState inner template'
       }
     }
+  },
+  iState = {
+    template: '<div ui-view>'+
+        '<ul><li ng-repeat="item in items">{{item}}</li></ul>'+
+      '</div>'
+  },
+  jState = {
+    template: '<span ng-class="test">jState</span>'
   };
 
   beforeEach(module(function ($stateProvider) {
@@ -61,7 +69,9 @@ describe('uiView', function () {
       .state('e', eState)
       .state('e.f', fState)
       .state('g', gState)
-      .state('g.h', hState);
+      .state('g.h', hState)
+      .state('i', iState)
+      .state('j', jState);
   }));
 
   beforeEach(inject(function ($rootScope, _$compile_) {
@@ -153,6 +163,41 @@ describe('uiView', function () {
 
       expect(elem[0].querySelector('.test').innerText).toBe(content);
     }));
+
+    // related to issue #435
+    it('initial view should be transcluded once to prevent breaking other directives', inject(function ($state, $q) {
+      scope.items = ["I", "am", "a", "list", "of", "items"];
+
+      elem.append($compile('<div ui-view></div>')(scope));
+
+      // transition to state that has an initial view
+      $state.transitionTo(iState);
+      $q.flush();
+
+      // verify if ng-repeat has been compiled
+      expect(elem.find('li').length).toBe(scope.items.length);
+
+      // transition to another state that replace the initial content
+      $state.transitionTo(jState);
+      $q.flush();
+
+      expect(elem.text()).toBe('jState');
+
+      // transition back to the state with empty subview and the initial view
+      $state.transitionTo(iState);
+      $q.flush();
+
+      // verify if the initial view is correct
+      expect(elem.find('li').length).toBe(scope.items.length);
+
+      // change scope properties
+      scope.$apply(function () {
+        scope.items.push(".", "Working?");
+      });
+
+      // verify if the initial view has been updated
+      expect(elem.find('li').length).toBe(scope.items.length);
+    }));
   });
 
 });