AngularJS ui-router: reload:true 也会重新加载父状态 [英] AngularJS ui-router: reload:true also reloads parent state

问题描述

在这个 plunk 你有两个 ui-router 状态，一个父级和一个子级.当通过单击链接调用子项时，因为它具有选项 reload: true 它总是被重新加载.这很好，但问题是父状态也被重新加载.尝试多次单击填充 11"链接，您会看到父时间戳也发生了变化.

In this plunk you have two ui-router states, a parent and a child. When the child is invoked by clicking on the link, since it has the option reload: true it is always reloaded. This is fine, but the problem is that the parent state is reloaded as well. Try to click on the 'Populate 11' link several times and you'll see that the parent timestamp also changes.

我怎样才能只重新加载孩子?

How can I reload only the child?

Javascript:

Javascript:

var app = angular.module("app", ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise("/");

  $stateProvider
    .state('state1', {
          templateUrl: 'state1.html',
          controller: function($scope) {

            $scope.theTime1 = Date.now();

          }
    })
    .state('state1.state11', {
          templateUrl: 'state11.html',
          controller: function($scope) {

               $scope.theTime11 = Date.now();

         }
    });

});

推荐答案

其实很简单.

不要使用 reload，因为这与您发现的完全相同.它会重新加载路线的所有内容.

Don't use reload because that does exactly what you found. It reloads everything for the route.

相反，向您的子路由添加一个参数，每次点击链接时，请确保更改该参数.这将强制重新加载子状态.

Instead, add a parameter to your child route and every time the link is clicked make sure to change that parameter. That will force the child state to be reloaded.

我用一个例子更新了你的 plunk.我只是添加了一个 num 参数，并在每次点击链接时增加一个 count 变量.

I updated your plunk with an example. I just added a num parameter and increase a count variable each time the link is clicked.

http://plnkr.co/edit/qTA39rrYFYUegzuFbWnc?p=preview

这篇关于AngularJS ui-router: reload:true 也会重新加载父状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！