html partial is not loaded into ui-view

Question

I have posted a sample on plunker:

http://plnkr.co/edit/aOOlXOUIUQTARb8D7jNR?p=preview

I get no errors in my browser console.

I want that when I switch the day/week/month views by pressing the according button that below the buttons the html for the view is shown. But that happens not.

The reason might because the day , week and month controllers are not hit in the code whyever that is.

So my question is why are the controllers not loaded or the ui-view not replaced with the real html partial.

As I do not know the real cause I have to ask for both cases.

'use strict';
angular
  .module('dates', ['ui.router'])
  .run(['$rootScope', '$state', '$stateParams',
      function($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
      }
    ]
  )
  .config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/dateplanner/day');

    $stateProvider
      .state('dates', {
        url: '/dateplanner',
        abstract: true,
        views: {
          'menu@': {
            templateUrl: 'menu.html'
          },
          'content@': {
            templateUrl: 'dateplanner.html',
            controller: 'DateplannerController'
          }
        }
      })
       .state('dates.day', {
        url: '/day',
        views: {
          'planner@': {
            templateUrl: 'dateplannerday.html',
            controller: 'DateplannerDayController'
          }
        }
      })
        .state('dates.week', {
        url: '/week',
        views: {
          'planner@': {
            templateUrl: 'dateplanner.week.html',
            controller: 'DateplannerWeekController'
          }
        }
      })
        .state('dates.month', {
        url: '/month',
        views: {
          'planner@': {
            templateUrl: 'dateplanner.month.html',
            controller: 'DateplannerMonthController'
          }
        }
      })
  });

MENU.HTML

<ul>
  <li ng-class="{ activeButton: $state.includes('dates') }" ui-sref-active="active">
    <a ui-sref="dates.day">date planner</a> 
  </li>
</ul>

DATEPLANNER.HTML

<div class="btn-group">
  <button ui-sref="dates.day" ui-sref-active="btn-primary" type="button" class="btn btn-default">Day</button>

  <button ui-sref="dates.week" ui-sref-active="btn-primary" type="button" class="btn btn-default">Week</button>

  <button ui-sref="dates.month" ui-sref-active="btn-primary" type="button" class="btn btn-default">Month</button>
</div>
<div style="background:white;" ui-view="planner">
Loading...</div>

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

As we've discussed it here:

Replace self partial with another partial with angularjs ui router

the issue is related to the:

View Names - Relative vs. Absolute Names

In our case, we can fix this example by extending the child states (day, week, month) resp. their view names to be targeting the absolute view names target:

   .state('dates.day', {
    url: '/day',
    views: {
      'planner@dates': {
         ...
      }
    }
  })
    .state('dates.week', {
    url: '/week',
    views: {
      'planner@dates': {
         ...
      }
    }
  })
    .state('dates.month', {
    url: '/month',
    views: {
      'planner@dates': {
         ...
      }
    }

Because these views target is in the state dates we are adding its name after delimiter @, i.e. 'planner@dates'. Also, because this state is parent of all of them, we can skip it. Parent state is behind the scene injected for us by ui-router. Some more explanation:

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, 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.

Quick overview

The ui-view="content" placed in index.html is getting the absolute name "content@". The delimiter is @ and state is root represented as "" (string empty). I.e. viewname@statename ===`"content@"
The dates children can target parent like "planner@dates" or "planner". They also can target root like "content@"

OK I can make the views: 'planner@dates' OR 'planner' both works. I have to understand this more and read again til I get it. Thanks. — Elisabeth, Aug 01 '14 at 05:43
funny... planner@dates does not work, only 'planner' works. Any explanation for that? — Elisabeth, Aug 01 '14 at 23:16
Not sure what you mean. I updated that plunker http://plnkr.co/edit/4Q0aTG4VllTvl9niCTRS?p=preview and appended new part "footer" inside of state dates/view planner.html. it targets "footer@dates" and it loads...simply: "@dates" means, that the parent state has name "dates" — Radim Köhler, Aug 02 '14 at 04:18
sorry Radim of course it works! Was my failure I did not try it in the plunker I pasted here so I overlooked the correct state which was not dates... — Elisabeth, Aug 02 '14 at 07:36

score 0 · Answer 2 · answered Jul 31 '14 at 22:19

Please see here http://plnkr.co/edit/8a898K4F0zz1z9VcH9Tq?p=preview what was the reason to use @ in view name ?

 angular
      .module('dates', ['ui.router'])
      .run(['$rootScope', '$state', '$stateParams',
          function($rootScope, $state, $stateParams) {
            $rootScope.$state = $state;
            $rootScope.$stateParams = $stateParams;
          }
        ]
      )
      .config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/dateplanner/day');

        $stateProvider
          .state('dates', {
            url: '/dateplanner',
            abstract: true,
            views: {
              'menu': {
                templateUrl: 'menu.html'
              },
              'content': {
                templateUrl: 'dateplanner.html',
                controller: 'DateplannerController'
              }
            }
          })
           .state('dates.day', {
            url: '/day',
            views: {
              'planner': {
                templateUrl: 'dateplannerday.html',
                controller: 'DateplannerDayController'
              }
            }
          })
            .state('dates.week', {
            url: '/week',
            views: {
              'planner': {
                templateUrl: 'dateplanner.week.html',
                controller: 'DateplannerWeekController'
              }
            }
          })
            .state('dates.month', {
            url: '/month',
            views: {
              'planner': {
                templateUrl: 'dateplanner.month.html',
                controller: 'DateplannerMonthController'
              }
            }
          })
      });

html partial is not loaded into ui-view

2 Answers2

Linked