Merge pull request #1368 from christopherthielen/issue-1324

fix(uiView): allow inteprolated ui-view names

Author: christopherthielen

src/viewDirective.js

@@ -111,8 +111,8 @@
  * <ui-view autoscroll='scopeVariable'/>
  * </pre>
  */
-$ViewDirective.$inject = ['$state', '$injector', '$uiViewScroll'];
-function $ViewDirective(   $state,   $injector,   $uiViewScroll) {
+$ViewDirective.$inject = ['$state', '$injector', '$uiViewScroll', '$interpolate'];
+function $ViewDirective(   $state,   $injector,   $uiViewScroll,   $interpolate) {
 
   function getService() {
     return ($injector.has) ? function(service) {
@@ -209,7 +209,7 @@ function $ViewDirective(   $state,   $injector,   $uiViewScroll) {
 
         function updateView(firstTime) {
           var newScope,
-              name            = getUiViewName(attrs, $element.inheritedData('$uiView')),
+              name            = getUiViewName(scope, attrs, $element, $interpolate),
               previousLocals  = name && $state.$current && $state.$current.locals[name];
 
           if (!firstTime && previousLocals === latestLocals) return; // nothing to do
@@ -251,16 +251,16 @@ function $ViewDirective(   $state,   $injector,   $uiViewScroll) {
   return directive;
 }
 
-$ViewDirectiveFill.$inject = ['$compile', '$controller', '$state'];
-function $ViewDirectiveFill ($compile, $controller, $state) {
+$ViewDirectiveFill.$inject = ['$compile', '$controller', '$state', '$interpolate'];
+function $ViewDirectiveFill (  $compile,   $controller,   $state,   $interpolate) {
   return {
     restrict: 'ECA',
     priority: -400,
     compile: function (tElement) {
       var initial = tElement.html();
       return function (scope, $element, attrs) {
         var current = $state.$current,
-            name = getUiViewName(attrs, $element.inheritedData('$uiView')),
+            name = getUiViewName(scope, attrs, $element, $interpolate),
             locals  = current && current.locals[name];
 
         if (! locals) {
@@ -290,10 +290,11 @@ function $ViewDirectiveFill ($compile, $controller, $state) {
 
 /**
  * Shared ui-view code for both directives:
- * Given attributes and inherited $uiView data, return the view's name
+ * Given scope, element, and its attributes, return the view's name
  */
-function getUiViewName(attrs, inherited) {
-  var name = attrs.uiView || attrs.name || '';
+function getUiViewName(scope, attrs, element, $interpolate) {
+  var name = $interpolate(attrs.uiView || attrs.name || '')(scope);
+  var inherited = element.inheritedData('$uiView');
   return name.indexOf('@') >= 0 ?  name :  (name + '@' + (inherited ? inherited.state.name : ''));
 }
 

test/viewDirectiveSpec.js

@@ -420,6 +420,36 @@ describe('uiView', function () {
         expect(uiViews.eq(1).text()).toBe(lState.views.view2.template);
         expect(uiViews.eq(2).text()).toBe(lState.views.view3.template);
       }));
+
+      it ('should interpolate ui-view names', inject(function($state, $q, $compile) {
+        elem.append($compile('<div ng-repeat="view in views">' +
+          '<ui-view name="view{{$index + 1}}">hallo</ui-view>' +
+          '</div>')(scope));
+
+        $state.transitionTo(lState);
+        $q.flush();
+
+        expect(elem.find('ui-view').length).toBe(0);
+
+        scope.views = ['view1', 'view2'];
+
+        scope.$digest();
+
+        var uiViews = elem.find('ui-view');
+
+        expect(uiViews.eq(0).text()).toBe(lState.views.view1.template);
+        expect(uiViews.eq(1).text()).toBe(lState.views.view2.template);
+        expect(uiViews.eq(2).length).toBe(0);
+
+        scope.views.push('view3');
+        scope.$digest();
+
+        uiViews = elem.find('ui-view');
+
+        expect(uiViews.eq(0).text()).toBe(lState.views.view1.template);
+        expect(uiViews.eq(1).text()).toBe(lState.views.view2.template);
+        expect(uiViews.eq(2).text()).toBe(lState.views.view3.template);
+      }));
     });
   });