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