AngularJS-Angular UI-Router仅重新加载嵌套视图，而不重新加载父视图

Question

我知道这很长，但是我需要在主要问题之前提供一些背景信息。我正在创建一个页面，该页面将分为两列。这是ui路由器代码：

  $urlRouterProvider.otherwise("/projects/edit")

  $stateProvider
    .state('projects', {
      url: "/projects",
      template: "<div ui-view></div>"
    })

    .state('projects.edit', {
      resolve: {
        test: function(){
          console.log('projects.edit resolve called')
        }
      },
      url: "/edit",
      templateUrl: "projects.html",
      controller: function($scope, $state){
        $state.go('projects.edit.surveys')

        $scope.transitionToOtherRoute = function () {
            $state.transitionTo('otherRoute')
        }
      }
    })
    .state('projects.edit.surveys', {
      resolve: {
        items: function(){
          var randomNumberArray = [1,2,3,4,5,6]
          //this will just shuffle the array
          for(var j, x, i = randomNumberArray.length; i; j = Math.floor(Math.random() * i), x = randomNumberArray[--i], randomNumberArray[i] = randomNumberArray[j], randomNumberArray[j] = x);
          return randomNumberArray
        }
      },
      url: "/surveys",
      views: {
        "viewA": { 
            templateUrl: "projects.surveys.html",
            controller: function($scope, items, $state){
            $scope.items = items
            $scope.addSurvey = function(){
              $state.transitionTo($state.current, $state.params, { reload: true, inherit: true, notify: true })
            }
          }
        }
      }
    })
    .state('otherRoute', {
      url: "/otherRoute",
      templateUrl:"otherRoute.html"
    })

基本上，用户将过渡到projects.edit状态，该状态具有如下所示的模板：

<h3>PROJECTS.HTML PARTIAL</h3>
<div class="row">
  <div class="col-md-6">
    Input Text: <input type="text"><br>
    <button type="submit" class="btn btn-primary" ng-click="updateProject()">Go to otherRoute</button>
  </div>
  <div class="col-md-6">
    <a ui-sref=".surveys"></a>
    <div ui-view="viewA"></div>
  </div>
</div>

将为用户显示两列。左列仅具有一个输入字段和按钮，按下该按钮会将用户转换到otherRoute状态。

当我们转换到projects.edit状态时，其控制器将调用$state.go('projects.edit.surveys')，这将在右列中设置其嵌套视图。该projects.edit.surveys状态将首先以随机顺序解析数字数组，然后将其作为参数传入控制器items。所述projects.surveys.html然后部分将被放置在右列。它将以随机顺序显示数字列表，并有一个按钮，调用$state.transitionTo($state.current, $state.params, { reload: true, inherit: true, notify: true })。此按钮将重新加载projects.edit.surveys状态。用户将以不同的顺序看到数字，并且左栏中输入字段中的所有文本都将消失。

在此Plunker中可以看到它的作用：http
://plnkr.co/edit/SK8hjMpw6kvPiTdVeEhz?p=preview

这一切都引出了我的问题：我如何才能只重新加载右侧列（即嵌套视图projects.edit.surveys）的内容，而不重新加载父视图（projects.edit）？我希望能够按下右列中的按钮，并且仅对数字进行重新排序（在projects.edit.surveys状态的resolve中完成），而不清除左列中的输入字段（并且不调用中的resolve方法projects.edit）。换句话说，我只想刷新右列projects.edit.surveys状态，而不影响左手projects.edit状态的任何内容。

任何帮助将不胜感激！！！

Answer 1

有一个改装的矮人。除了使用非常极端的设置reload: true，我们还可以从本机ui-router设计中受益：

如果声明的参数已更改，请重新加载状态

因此，这将是新的状态和控制器定义：

.state('projects.edit.surveys', {
      resolve: {
        ... // unchanged
      },
      // here we declare param trigger
      url: "/surveys/{trigger}",
      views: { 
      '' : { 
            templateUrl: "projects.surveys.html",
            controller: function($scope, items, $state){
              $scope.items = items
              $scope.addSurvey = function(){

                // here we copy current params
                var params = angular.copy($state.params);
                // do some tricks to not change URL
                params.trigger = params.trigger === null ? "" : null;
                // go to the same state but without reload : true
                $state.transitionTo($state.current, params, { reload: false, inherit: true, notify: true })
              }
            }
        }
      }
    })

从用户的角度来看，一个参数是变化的，但不是它的知名度-这是空或…的String.Empty检查调整和 更多的本地ui-router解决方案
在这里