fix(view): Allow targeting nested named ui-view by simple ui-view name

Closes #3355
angular-ui · Mar 17, 2017 · 8fe5b1f · 8fe5b1f
1 parent ec6e5e4
commit 8fe5b1f
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/src/directives/viewDirective.ts b/src/directives/viewDirective.ts
@@ -214,7 +214,11 @@ function $ViewDirective($view: ViewService, $animate: any, $uiViewScroll: any, $
  config: null, // The ViewConfig loaded (from a state.views definition)
  configUpdated: configUpdatedCallback, // Called when the matching ViewConfig changes
  get creationContext() { // The context in which this ui-view "tag" was created
- return parse('$cfg.viewDecl.$context')(inherited);
+ let fromParentTagConfig = parse('$cfg.viewDecl.$context')(inherited);
+ // Allow <ui-view name="foo"><ui-view name="bar"></ui-view></ui-view>
+ // See https://github.com/angular-ui/ui-router/issues/3355
+ let fromParentTag = parse('$uiView.creationContext')(inherited);
+ return fromParentTagConfig || fromParentTag;
  }
  };
 

diff --git a/test/viewDirectiveSpec.ts b/test/viewDirectiveSpec.ts
@@ -722,17 +722,39 @@ describe("UiView", function() {
  beforeEach(module(function($stateProvider) {
  $stateProvider
  .state('main', { abstract: true, views: { main: {} } })
- .state('main.home', { views: { content: { template: 'home.html' } } });
+ .state('main.home', { views: { content: { template: 'HOME' } } })
+ .state('test', { views: { 'nest': { template: 'TEST' } } });
  }));
 
- it("shouldn't puke on weird view setups", inject(function($compile, $rootScope, $q, $state) {
+ it("shouldn't puke on weird nested 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');
  }));
+
+ // Test for https://github.com/angular-ui/ui-router/issues/3355
+ it("should target weird nested view setups using the view's simple name", inject(function($compile, $rootScope, $q, $state) {
+ let tpl = `
+ <div>
+ <div ui-view="main">
+ MAIN-DEFAULT-
+ <div ui-view="content">
+ <div ui-view="nest"></div>
+ </div>
+ </div>
+ </div>
+ `;
+ let el = $compile(tpl)($rootScope);
+
+ $state.go('test');
+ $q.flush();
+
+ expect($state.current.name).toBe('test');
+ expect(el.text().replace(/\s*/g, "")).toBe('MAIN-DEFAULT-TEST');
+ }));
 });
 
 describe('uiView transclusion', function() {