48274

Child route does not trigger

Question:

I am building this route system

var app = angular.module('plunker', ['ui.router']); app.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider .when('/admin', '/admin/dashboard') .when('/user', '/user/dashboard') .otherwise('/admin/dashboard'); $stateProvider .state('admin', { url: '/admin/dashboard', resolve: { test: function() { console.log('called admin'); return; } }, views: { 'navigation': { template: '<div>admin navigation. Go <a ui-sref="admin.link1">link1</a></div>' }, 'content': { template: '<div>admin dashboard</div>' } } }) .state('admin.link1', { //for some reason admin.link1 does not work but just link1 is OK url: '/admin/link1', resolve: { test: function() { console.log('admin.link1 called resolve'); return; } }, views: { 'navigation': { template: '<div>admin navigation</div>' }, 'content': { template: '<div>admin link1</div>' } } }) .state('user', { url: '/user/dashboard', views: { 'navigation': { template: '<div>user navigation</div>' }, 'content': { template: '<div>user dashboard</div>' } } }); });

The HTML will have navigation and content ui-view in it

<body ng-app="plunker"> <div> <a ui-sref="admin">Admin</a> <a ui-sref="user">User</a> </div> <div ui-view="navigation"></div> <div ui-view="content"></div> </body>

I want to click on link1 and go to admin.link1 state but somehow that is not working.

But if I remove the admin parent and use link1 only, it works fine.

Code: <a href="http://plnkr.co/edit/F7lw58esXz7rWzeo3ER6?p=preview" rel="nofollow">http://plnkr.co/edit/F7lw58esXz7rWzeo3ER6?p=preview</a>

Preview: <a href="http://embed.plnkr.co/F7lw58esXz7rWzeo3ER6/preview" rel="nofollow">http://embed.plnkr.co/F7lw58esXz7rWzeo3ER6/preview</a>

Any clue?

Answer1:

You were almost there, the updated <a href="http://plnkr.co/edit/qOLugNWhwfPSDf3sfuzN?p=preview" rel="nofollow">plunker</a>. There is only one change the nested views do have appended sign <strong>'@'</strong>:

.state('admin.link1', { url: '/admin/link1', resolve: { test: function() { console.log('admin.link1 called resolve'); return; } }, views: { // instead of this // 'navigation': { // we have to use absolute name with the @ at the end 'navigation@': { template: '<div>admin navigation</div>' }, // this is searched in parent view // 'content': { // this is targting the root 'content@': { template: '<div>admin link1</div>' } } })

The point is hidden in the <a href="https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names" rel="nofollow">absolut view naming</a>, an extract:

<blockquote>

Behind the scenes, every view gets assigned an absolute name that follows a scheme of <strong>viewname@statename</strong>, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

</blockquote>

The working example(s) <a href="http://plnkr.co/edit/qOLugNWhwfPSDf3sfuzN?p=preview" rel="nofollow">here</a> or other <a href="http://plnkr.co/edit/0QgMkFXEFna5mT0HIv2S?p=preview" rel="nofollow">here</a>

<em>Please, try to read this <a href="https://stackoverflow.com/a/24749774/1679310" rel="nofollow">answer</a>, where I tried deeply describe what is the view naming about.(search for a last section: EXTEND: to give THE answer to a comment)</em>

Recommend

  • How to dynamically update popover content AngularJS Bootstrap
  • Is there a way using angular ui router not show #!/login?
  • tslint error: Asterik in jsdoc must be aligned
  • Filter in ui-sref
  • Get the next href in a list in another file with jQuery?
  • Unable to link my own static libraries
  • Set up the Android-Facebook sdk for Netbeans
  • How to set the navigation bar to the top in Table View?
  • how to resolve OAuthException: (#100)
  • Base Internationalization and “Could not find a storyboard named […]”
  • jQueryMobile, Ajax Navigation, and MVC
  • Trying to get the char code of ENTER key
  • Using Sax parsing to edit and write XML in VB6
  • Debug.DrawLine not showing in the GameView
  • Sencha Touch 2.0 Controller refs attribute not working?
  • Yii2: Config params vs. const/define
  • Typescript - Unable to get 'import' statement to function
  • Change multiple background-images with jQuery
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Traverse Array and Display in markup
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Django query for large number of relationships
  • costura.fody for a dll that references another dll
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal
  • How to push additional view controllers onto NavigationController but keep the TabBar?