diff --git a/src/viewDirective.js b/src/viewDirective.js
index b937aea3c..d3cf100a2 100644
--- a/src/viewDirective.js
+++ b/src/viewDirective.js
@@ -111,8 +111,8 @@
*
*
*/
-$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,8 +251,8 @@ 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,
@@ -260,7 +260,7 @@ function $ViewDirectiveFill ($compile, $controller, $state) {
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 : ''));
}
diff --git a/test/viewDirectiveSpec.js b/test/viewDirectiveSpec.js
index 82734f0de..44508b610 100644
--- a/test/viewDirectiveSpec.js
+++ b/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('
' +
+ 'hallo' +
+ '
')(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);
+ }));
});
});