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

Question

我在我的角度应用程序中使用角度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.'
    }) 

});

在partial-home.html中，我写过：-

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

现在，当我在浏览器中执行此应用时，如果我打开路线

/home

浏览器控制台一次显示“已加载家庭内容”，然后如果我单击列表链接，则地址栏将更改为

/home/list

然后控制台也会显示一次。

但是，如果我当时（当路由为“主页/列表”时）刷新浏览器选项卡，则控制台将显示两次。 请帮我为什么这件事发生。

Answer 1

这些是嵌套视图。 重新加载后控制台中出现两条消息的原因是：当您从/ home启动时，将加载home状态。 当您转到那里的/ home / list时，由于home状态已经加载，因此只需要加载home.list。 重新加载时，需要加载两种状态：home和home.list。

编辑：我没有足够的声誉，所以我不能发表评论。 我猜您在家庭模板中使用ui-view会导致子级和父级共享同一范围。 您正在听孩子和父母的活动范围。 所以被叫两次是很自然的

Answer 2

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

我猜您在家庭模板中使用ui-view会导致子级和父级共享同一范围。 您正在听孩子和父母的活动范围。 所以被叫两次是很自然的