fix(uiView): separate $uiView and $uiViewAnim element.data()

The `$uiView` element.data lifecycle is somewhat fragile. The Fill directive reads the inherited `$uiView` data to figure out which state the ui-view was created in.  In a previous commit, the non-fill directive was setting the `$uiView` date earlier to hold the animation promises.  This caused the fill directive to read the wrong state data, breaking some users' apps.

BC-BREAK Users who were using `element.data('$uiView').$animEnter` or `$animLeave` should now use `element.data('$uiViewAnim').$animEnter` instead

Closes #2763

Author: christopherthielen

src/viewDirective.js

@@ -221,7 +221,7 @@ function $ViewDirective(   $state,   $injector,   $uiViewScroll,   $interpolate,
           }
 
           if (currentEl) {
-            var $uiViewData = currentEl.data('$uiView');
+            var $uiViewData = currentEl.data('$uiViewAnim');
             renderer.leave(currentEl, function() {
               $uiViewData.$$animLeave.resolve();
               previousEl = null;
@@ -234,7 +234,7 @@ function $ViewDirective(   $state,   $injector,   $uiViewScroll,   $interpolate,
 
         function updateView(firstTime) {
           var newScope,
-              name            = getUiViewName(scope, attrs, inherited, $interpolate),
+              name            = getUiViewName(scope, attrs, $element, $interpolate),
               previousLocals  = name && $state.$current && $state.$current.locals[name];
 
           if (!firstTime && previousLocals === latestLocals) return; // nothing to do
@@ -257,14 +257,14 @@ function $ViewDirective(   $state,   $injector,   $uiViewScroll,   $interpolate,
 
           var clone = $transclude(newScope, function(clone) {
             var animEnter = $q.defer(), animLeave = $q.defer();
-            var viewData = {
-              name: name,
+            var viewAnimData = {
               $animEnter: animEnter.promise,
               $animLeave: animLeave.promise,
               $$animLeave: animLeave
             };
 
-            renderer.enter(clone.data('$uiView', viewData), $element, function onUiViewEnter() {
+            clone.data('$uiViewAnim', viewAnimData);
+            renderer.enter(clone, $element, function onUiViewEnter() {
               animEnter.resolve();
               if(currentScope) {
                 currentScope.$emit('$viewContentAnimationEnded');
@@ -309,14 +309,14 @@ function $ViewDirectiveFill (  $compile,   $controller,   $state,   $interpolate
       var initial = tElement.html();
       return function (scope, $element, attrs) {
         var current = $state.$current,
-            $uiViewData = $element.data('$uiView'),
-            locals  = current && current.locals[$uiViewData.name];
+            name = getUiViewName(scope, attrs, $element, $interpolate),
+            locals  = current && current.locals[name];
 
         if (! locals) {
           return;
         }
 
-        extend($uiViewData, { state: locals.$$state });
+        $element.data('$uiView', { name: name, state: locals.$$state });
         $element.html(locals.$template ? locals.$template : initial);
 
         var resolveData = angular.extend({}, locals);
@@ -347,9 +347,10 @@ function $ViewDirectiveFill (  $compile,   $controller,   $state,   $interpolate
  * Shared ui-view code for both directives:
  * Given scope, element, and its attributes, return the view's name
  */
-function getUiViewName(scope, attrs, inherited, $interpolate) {
+function getUiViewName(scope, attrs, element, $interpolate) {
   var name = $interpolate(attrs.uiView || attrs.name || '')(scope);
-  return name.indexOf('@') >= 0 ?  name :  (name + '@' + (inherited ? inherited.state.name : ''));
+  var uiViewCreatedBy = element.inheritedData('$uiView');
+  return name.indexOf('@') >= 0 ?  name :  (name + '@' + (uiViewCreatedBy ? uiViewCreatedBy.state.name : ''));
 }
 
 angular.module('ui.router.state').directive('uiView', $ViewDirective);

test/viewDirectiveSpec.js

@@ -112,7 +112,7 @@ describe('uiView', function () {
   nState = {
     template: 'nState',
     controller: function ($scope, $element) {
-      var data = $element.data('$uiView');
+      var data = $element.data('$uiViewAnim');
       $scope.$on("$destroy", function() { log += 'destroy;'});
       data.$animEnter.then(function() { log += "animEnter;"});
       data.$animLeave.then(function() {
@@ -715,3 +715,21 @@ describe('uiView', function () {
 
   });
 });
+
+describe("UiView", function() {
+  beforeEach(module('ui.router'));
+  beforeEach(module(function($stateProvider) {
+    $stateProvider
+        .state('main', { abstract: true, views: { main: {} } })
+        .state('main.home', { views: { content: { template: 'home.html' } } });
+  }));
+
+  it("shouldn't puke on weird view setups", inject(function($compile, $rootScope, $q, $state) {
+    $compile('<div ui-view="main"><div ui-view="content"></div></div>')($rootScope);
+
+    $state.go('main.home');
+    $q.flush();
+
+    expect($state.current.name).toBe('main.home');
+  }));
+});