角度ui-路由器加载视图两次

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

在我的角度应用中，我使用的是角ui-路由器。对于我写的路由部分

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:-

在partial-home。html我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 content loaded”，然后如果我单击list链接，addressbar将更改为

/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.

但是如果我在那个时候刷新浏览器选项卡(当路径是home/list)，控制台将显示两次。请帮助我为什么这件事发生。

2 个解决方案

#1

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.

这些都是嵌套视图。在重新加载之后，您的控制台中有两个消息的原因是:当您在/home启动时，将加载home状态。当你去/home/list的时候，只有home。列表需要加载，因为home状态已经加载了。当您重新加载时，有两个状态需要加载:home和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

编辑:我没有足够的声誉，所以我不能评论。我猜你在home模板中使用ui-view会导致子模板和父模板共享相同的范围。你在听孩子和父母的活动范围。所以很自然地会被打两次。

#2

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

因为回家。list是home的子状态，当你重新加载home的页面时。它首先初始化home控制器的视图，而不是list控制器的视图，因此$viewContentLoaded被调用两次

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

我猜你在home模板中使用ui-view会导致子模板和父模板共享相同的范围。你在听孩子和父母的活动范围。所以很自然地会被打两次。