AngularJS - Angular UI-Router перезагружает только вложенное представление, а не родительское

Я знаю, что это довольно долго, но мне нужно предоставить некоторый контекст перед моим главным вопросом. Я создаю страницу, которая будет разбита на два столбца. Вот код ui-router:

  $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, и не очищать поле ввода в левом столбце (и не вызывать методы разрешения в projects.edit). Другими словами, я бы хотел только обновить состояние правого столбца projects.edit.surveys, не затрагивая ничего в левом projects.edit состоянии.

Любая помощь будет принята с благодарностью!!!

Ответы

Ответ 1

Существует plunker с одной модификацией. Вместо использования очень экстремальной настройки reload: true, мы можем получить прибыль от native ui-router desing:

перезагрузить состояние в случае изменения его объявленного параметра

Итак, это будет новое определение состояния и контроллера:

.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 })
              }
            }
        }
      }
    })

С точки зрения пользователя параметр меняется, но не его видимость - он равен null или string.Empty... Проверьте, что настройка и немного больше native ui-router solution здесь