Angular ui-router 加载视图两次 [英] Angular ui-router loading view twice

问题描述

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

var routerApp = angular.module('routerApp', ['ui.router']);routerApp.config(function($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise('/home');$stateProvider//主状态和嵌套视图 ========================================.state('家', {网址:'/家'，templateUrl: 'partial-home.html',控制器:函数($scope，$state){$scope.$on('$viewContentLoaded', function(){console.log("主页内容已加载",$state.current);})}})//带有自定义控制器的嵌套列表.state('home.list', {网址:'/列表'，模板:'我正在使用一个列表.'})//包含一些随机字符串数据的嵌套列表.state('home.paragraph', {网址:'/段落'，模板:我现在肯定可以喝一杯."})});

在 partial-home.html 我写过:-

<h1>温馨页面</h1><p>此页面演示了<span class="text-danger">嵌套</span>视图.
<a ui-sref=".list" class="btn btn-primary">列表</a><a ui-sref=".paragraph" class="btn btn-danger">段落</a>
<div ui-view></div>

现在当我在浏览器中执行这个应用程序时，如果我打开路由

/home

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

/home/list

然后控制台也显示一次.

但是如果我当时刷新浏览器选项卡(当路由是 home/list 时)，控制台会显示两次.请帮助我为什么会发生这种情况.

解决方案

这些是嵌套视图.重新加载后控制台中出现两条消息的原因是:当您从/home 开始时，将加载 home 状态.当你去那里的/home/list时，只需要加载home.list，因为home状态已经加载了.重新加载时需要加载两种状态:home 和 home.list.

我没有足够的声誉，所以我不能发表评论.我猜您在主页模板中使用了 ui-view，这会导致孩子和父母共享相同的范围.您正在收听孩子和父母的事件范围.所以很自然的被调用两次

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.

解决方案

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

这篇关于Angular ui-router 加载视图两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！