Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 角度ui路由器加载视图两次_Javascript_Angularjs_Angular Ui Router_Url Routing - Fatal编程技术网

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

Javascript 角度ui路由器加载视图两次,javascript,angularjs,angular-ui-router,url-routing,Javascript,Angularjs,Angular Ui Router,Url Routing,我在angular应用程序中使用angular ui路由器。对于我写的路由部分 var routerApp = angular.module('routerApp', ['ui.router']); routerApp.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/home'); $stateProvider // HOME STATES AND NESTE

我在angular应用程序中使用angular 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 content loaded”(主页内容加载)一次,然后如果单击列表链接,地址栏将变为

/home/list
然后控制台也会显示一次


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

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


我猜您在主模板中使用ui视图,这会导致子级和父级共享同一范围。您正在收听孩子和家长的活动范围。因此,被调用两次是很自然的

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


编辑:我没有足够的声誉,所以我不能发表评论。我猜您在主模板中使用ui视图,这会导致子级和父级共享同一范围。您正在收听孩子和家长的活动范围。因此,两次调用是很自然的,因为list是home的子对象,那么它显然会首先为home加载视图,然后为list加载视图。但是在这里,home视图被加载了两次。我没有在列表viewContentLoaded上添加任何控制台。另一件事是,当我在家里点击列表链接时,同样的事情也会发生。但在这种情况下,它只显示一个控制台。我猜您在主模板中使用ui视图,这会导致子级和父级共享同一范围。您正在收听孩子和家长的活动范围。所以被称为twiceI是很自然的,因为我也为list定义了一个控制器,所以它不会得到相同的作用域。仍然发生同样的事情。作用域不是在控制器之间继承的,而是在视图之间继承的。如果子视图在父视图中,它们的作用域相同,那么当我处于主视图状态时,应该会发生同样的事情,我单击列表链接转到home.list状态。因为列表是主视图的子视图,所以它显然会先加载主视图,然后加载列表视图。但是在这里,home视图被加载了两次。我没有在列表viewContentLoaded上添加任何控制台。另一件事是,当我在家里点击列表链接时,同样的事情也会发生。但在这种情况下,它只显示一个控制台。
/home/list