current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 42 down vote favorite
7

I am using ui-router for nested states & views. When I click on the link, the URL changes to the URL for the substate, but the template does not load.

For example, when the URL changes to the substate project/settings, the corresponding template project.settings.html is not loading.

Here is an SSCCE courtesy of Plunkr

Below is my code as well:

app.js

myApp.config(function ($stateProvider, $urlRouterProvider){
             $stateProvider
                  .state('project', {
                         url: "/project",
                         views:{
                         "content":{templateUrl: "partials/project.html"},
                         "header":{templateUrl: "partials/header"}
                         }
                       })

                  .state('project.settings', {
                          url: "/settings",
                          views:{
                           "content":{templateUrl: "partials/project.settings.html"},
                           "header":{templateUrl: "partials/header"}
                          }
                         }) 
            $urlRouterProvider.otherwise("/")                   
   }); 

    /* cheching whether the user is authentic or not*/


 myApp.run(function($rootScope,$location,$cookieStore,validateCookie,$state) {
      $rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState){
         if($cookieStore.get('user')){
            validateCookie.authService(function(result,error){
              if(!result){
                 $location.path("/");
              }else{
                $state.go('project.settings');
              }
            });   
         }
         else{
            $location.path("/"); 
         }
        });
    });

index.html

                <div ng-controller="userController">
                    <div ui-view="header"></div>
                    <div class="container" ui-view="content"></div>
                </div>

project.html

            <div ng-controller="userController">
                <div class="details">
                    <a ui-sref=".settings" class="btn btn-primary">Settings</a>
                </div>
            </div>

project.settings.html

        <h1>Project Setting -State test</h1>
share|improve this question
5  
Any luck with this? I have the exact same issue. – ac360 Jan 30 '14 at 17:03
    
Please check my Answer below.It works for me.. – Sajin M Aboobakkar Feb 7 '14 at 6:12
up vote 21 down vote

Your nested project.settings state needs to address the view in the higher state explicitly using an '@' suffix, ie.:

.state('project.settings', {
        url: "/settings",
        views:{
              "content@":{templateUrl: "partials/project.settings.html"},
              "header@":{templateUrl: "partials/header"}
        }
 })

See more details here https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

share|improve this answer
2  
I was wondering why I had seen the @ sign. I think this just opened my eyes. In my case I needed to use content@ because the ui-view I was using for content was in my index.html. It seems to be working; I am hoping this is the correct way to do this. – mattblang Dec 28 '14 at 4:14
    
Thank you, this has solved my problem :) – user2073973 Jul 16 '15 at 13:36
up vote 19 down vote accepted

First of all change file name project.settings.html in templateurl and file name to projectSettings.html (remove dot).

   .state('project.settings', {
         url: "/settings",
          views:{
               "content":{templateUrl: "partials/projectSettings.html"},
               "header":{templateUrl: "partials/header"}
           }
    })

Add two divs in the project template to load the sub pages (header abd projectSettings)

Note: Any content in this divs will be replaced with the page loaded here.

project.html

     <div ng-controller="userController">
        <div class="details">
            <a ui-sref=".settings" class="btn btn-primary">Settings</a>
        </div>
        <div ui-view="header">( Project Page header will replace with projectSettings header )</div>
        <div class="container" ui-view="content">( Project Page content will replace with projectSettings Content )</div>

    </div>
share|improve this answer
2  
Thanks! After maybe 6 other answers this is the one that got me through. What was I missing? Add two divs in the project template. – Ben Jul 30 '15 at 15:48
up vote 3 down vote

I had the same issue and the solution was to place ui-view to your parent's template. Because your partials also need a too, if they will be loading a template from a child state. See here https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-templates-are-not-appearing--loading--showing

share|improve this answer
up vote 2 down vote

If using nested views with UI-router, be sure to add ui-view into the html of the parent page and include specific named views.

share|improve this answer
up vote 0 down vote

Use ui-sref="project.settings" for link in project.html template.

share|improve this answer
    
already tried replacing .setting with project.setting .Anyway thanks – Sajin M Aboobakkar Jan 29 '14 at 8:50
    
Can you provide working plunker/fiddle (your plunker doesn't seem to work)? – coquin Jan 29 '14 at 9:36
    
The code in the plunkr is not a running one, I will improve it.I just thought, it will be helpfull to edit and compile,if anyone interested.thank you for your suggestions. – Sajin M Aboobakkar Jan 29 '14 at 10:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.