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

Angular ui-router loading view twice

本文关键字：两次 视图 ui 路由器 加载 角度      更新时间：2023-09-26

我在我的角度应用程序中使用了角度ui-router。对于我写的路由部分

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.'
    }) 
});

在部分家庭中.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

然后控制台也显示一次。

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

这些是嵌套视图。重新加载后控制台中出现两条消息的原因是：从/home 开始时，将加载家乡状态。当你转到那边的/home/list 时，只需要加载 home.list，因为主状态已经加载。重新加载时，需要加载两种状态：home 和 home.list。

编辑：我没有足够的声誉，所以我无法发表评论。 我猜你在主页模板中使用 UI-View 会导致孩子和父共享相同的范围。 您正在收听孩子和家长的活动范围。 所以被叫两次是很自然

的

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

我猜你在主页模板中使用 UI-View，这会导致孩子和父共享相同的范围。 您正在收听子项和项

项的项项"
相关文章：