fix(uiView): allow inteprolated ui-view names

Made internal function getUiViewName allow interpolated values.
Added test for issue #1324

Closes #1324

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);
+ }));
  });
  });