Angular ui-router loading view twice

Question

I'm using angular ui-router in my angular application. For the routing part I've written

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/home');

$stateProvider

    // HOME STATES AND NESTED VIEWS ========================================
    .state('home', {
        url: '/home',
        templateUrl: 'partial-home.html',
           controller : function($scope,$state){
            $scope.$on('$viewContentLoaded', function(){
              console.log("home content loaded",$state.current);
            })
          }
    })

    // nested list with custom controller
    .state('home.list', {
        url: '/list',
        template: 'I am using a list.'
    })

    // nested list with just some random string data
    .state('home.paragraph', {
        url: '/paragraph',
        template: 'I could sure use a drink right now.'
    }) 

});

In partial-home.html I've wriiten:-

<div class="jumbotron text-center">
  <h1>The Homey Page</h1>
  <p>This page demonstrates <span class="text-danger">nested</span> views.</p>

  <a ui-sref=".list" class="btn btn-primary">List</a>
  <a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>

</div>

<div ui-view></div>

Now when I'm executing this app in browser, if I open the the route

/home

The browser console is showing "home content loaded" once, and then if I click on the list link, the addressbar changes to

/home/list

And then also the console is shown once.

But if I refresh the browser tab at that time (when the route is home/list), the console is shown twice. Please help me why this thing happening.

bahadir · Accepted Answer · 2014-12-23 14:35:06Z

2

These are nested views. The reason why there are two messages in your console after reload is: When you start at /home, the home state is loaded. When you go to /home/list over there, only home.list need to be loaded since the home state is already loaded. When you reload there are two states that need to be loaded: home and home.list.

Edit: i dont have enough reputation so i cant comment. i guess that you use ui-view inside home template which causes child and parent to share the same scope. u are listening to both child's and parent's scope for the event. so it is natural to be called twice

edited Dec 23, 2014 at 14:35

bahadir

7191 gold badge11 silver badges28 bronze badges

answered Dec 23, 2014 at 13:55

user1149339

Sign up to request clarification or add additional context in comments.

1 Comment

Indranil Mondal Over a year ago

As list is child of home, then it'll obviously load the view for home first and then the view for list. But here the view for home is being loaded twice. I have not added any console on list viewContentLoaded. Another thing is, when I'm in /home and clicking on the list link, then also the same thing should happen. But in that case, it's only showing one console.

Indranil Mondal · Accepted Answer · 2014-12-23 14:39:00Z

1

because home.list is a child state of home and when you reload page for home.list it first initializes view of home controller than view of list controller so $viewContentLoaded is called twice

i guess that you use ui-view inside home template which causes child and parent to share the same scope. u are listening to both child's and parent's scope for the event. so it is natural to be called twice

edited Dec 23, 2014 at 14:39

Indranil Mondal

2,8673 gold badges29 silver badges42 bronze badges

answered Dec 23, 2014 at 13:55

bahadir

7191 gold badge11 silver badges28 bronze badges

10 Comments

Indranil Mondal Over a year ago

As list is child of home, then it'll obviously load the view for home first and then the view for list. But here the view for home is being loaded twice. I have not added any console on list viewContentLoaded. Another thing is, when I'm in /home and clicking on the list link, then also the same thing should happen. But in that case, it's only showing one console.

bahadir Over a year ago

i guess that you use ui-view inside home template which causes child and parent to share the same scope. u are listening to both child's and parent's scope for the event. so it is natural to be called twice

Indranil Mondal Over a year ago

I've defined a controller for list also, so that it does not get the same scope. Still same thing is happening.

bahadir Over a year ago

scope is not inherited between controllers it is inherited between views. if child view is inside parent view they get the same scope

Indranil Mondal Over a year ago

Then same thing should happen when I'm in home state and I click on the list link to go to the home.list state.

|

Collectives™ on Stack Overflow

Angular ui-router loading view twice

2 Answers 2

1 Comment

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related