AngularJS ui-router: reload:true同样会重新加载父状态

在本文中，我们将介绍AngularJS中的ui-router，并解释在使用reload:true时，如何重新加载父状态。

什么是AngularJS和ui-router？

AngularJS是一个由Google开发的JavaScript框架，用于构建单页面应用程序。它提供了一些强大的功能，例如数据绑定、依赖注入和模板引擎等，使开发者能够更容易地构建可维护和可扩展的应用程序。

ui-router是一个用于AngularJS的强大路由器，用于管理单页面应用程序的不同状态（states）和视图（views）。相比于AngularJS内置的ngRoute模块，ui-router提供了更灵活和功能更强大的路由功能，允许我们使用层级和嵌套的状态，以及多个命名视图。

ui-router中reload:true的作用

在ui-router中，我们可以通过在状态配置对象中设置reload:true来重新加载该状态。当我们切换到这个状态时，它将重新初始化并重新加载状态所对应的控制器和模板。

在一些特定的情况下，我们可能需要重新加载父状态。例如，当一个子状态改变了父状态所依赖的数据，并且我们希望在切换回父状态时能够看到这些最新的数据。

reload:true同时重新加载父状态

当在子状态中设置reload:true时，ui-router不仅会重新加载子状态，还会重新加载父状态。这意味着在切换回父状态时，父状态的控制器和模板将会被重新初始化和加载。

让我们来看一个示例来说明这个行为：

angular.module('myApp', ['ui.router'])
   .config(function( $stateProvider){$ stateProvider
         .state('parent', {
            url: '/parent',
            templateUrl: 'parent.html',
            controller: 'ParentController'
         })
         .state('parent.child', {
            url: '/child',
            templateUrl: 'child.html',
            controller: 'ChildController'
         });
   })
   .controller('ParentController', function( $scope){$ scope.data = 'Hello Parent!';
   })
   .controller('ChildController', function( $scope){$ scope.data = 'Hello Child!';
   });

在上面的示例中，我们定义了一个父状态和一个子状态。父状态对应的模板是parent.html，控制器是ParentController。子状态对应的模板是child.html，控制器是ChildController。

当我们切换到子状态parent.child时，子状态控制器和模板将会被初始化和加载。如果我们在切换回父状态parent时设置了reload:true，则父状态控制器和模板也将被重新初始化和加载。

<!-- parent.html -->
<div ng-controller="ParentController">
   <h1>{{data}}</h1>
</div>

<!-- child.html -->
<div ng-controller="ChildController">
   <h1>{{data}}</h1>
</div>

在父状态的模板中，我们展示了一个简单的标题，标题的内容由父状态控制器中的data变量决定。同样，在子状态的模板中也展示了一个标题，标题的内容由子状态控制器中的data变量决定。

当我们切换到子状态时，标题将会变成”Hello Child!”。如果我们在切换回父状态时设置了reload:true，那么当我们切换回父状态时，标题将会重新变成”Hello Parent!”。

这是因为设置了reload:true的子状态的重新加载也影响到了父状态的重新加载，所以我们能够看到最新的父状态数据。