AngularJS - 角UI的重新加载路由器仅嵌套的观点，而不是父母 [英] AngularJS - Angular UI-Router reload only nested view, not parent

问题描述

我知道这是很长，但我需要我的主要问题之前，提供一些背景。我创建将被分割为两列的页面。这里是UI路由器code：

I know this is rather long, but I need to provide some context before my main question. I am creating a page that will be split into two columns. Here is the ui-router code:

  $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 的状态，其中有一个模板，看起来是这样的：

Basically, the user will be transitioned to the projects.edit state, which has a template that looks like this:

<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>

用户将有两列psented $ P $。左栏将只是一个输入字段和按钮，当pressed将转换用户到 otherRoute 状态。

当我们过渡到 projects.edit 的状态，它的控制器将调用 $ state.go（'projects.edit.surveys'），这将设置它的嵌套视图在右列。在 projects.edit.surveys 国家将首先解决数字数组以随机的顺序，它将传递到控制器作为一个参数叫项目。在 projects.surveys.html 部分将被放置在右列。它会显示号码列表随机顺序，并有一个按钮，它调用 $ state.transitionTo（$​​ state.current，$ state.params，{重载：真的，继承：真实，通知：真}）。该按钮将刷新 projects.edit.surveys 状态。用户将看到的数字以不同的顺序，并在输入字段中的任何文本左栏将消失。

When we transition to the projects.edit state, it's controller will call $state.go('projects.edit.surveys'), which will set up it's nested view in the right column. The projects.edit.surveys state will first resolve an array of numbers in a random order, which it will pass into the controller as a parameter called items. The projects.surveys.html partial will then be placed in the right column. It will show the list of numbers in a random order and have a button, which calls $state.transitionTo($state.current, $state.params, { reload: true, inherit: true, notify: true }). This button will reload the projects.edit.surveys state. The user will see the numbers in a different order, and any text in the input field in the left column will disappear.

这可以看出在本Plunker动作：<一href=\"http://plnkr.co/edit/SK8hjMpw6kvPiTdVeEhz?p=$p$pview\">http://plnkr.co/edit/SK8hjMpw6kvPiTdVeEhz?p=$p$pview

This can be seen in action in this Plunker: http://plnkr.co/edit/SK8hjMpw6kvPiTdVeEhz?p=preview

所有这一切导致我的问题：我怎么只能重装右侧立柱即嵌套视图内容（ projects.edit.surveys ），无重装父视图（ projects.edit ）？我希望能够preSS按钮在右列，只能重新排序号码，这是在 projects.edit.surveys 做了国家的决心，并在左边的列不明确的输入字段（而不是调用决心方法projects.edit ）。换句话说，我想只刷新右列 projects.edit.surveys 状态，没有左手影响任何 projects.edit 状态。

This all leads to my question: how can I only reload the content of the right column ie the nested view (projects.edit.surveys), without reloading the parent view (projects.edit)? I would like to be able press the button in the right column and only re-sort the numbers, which is done in projects.edit.surveys state's resolve, and not clear the input field in the left column (and not call the resolve methods in projects.edit). In other words, I'd like only refresh the right column projects.edit.surveys state, without affecting anything in the left hand projects.edit state.

任何帮助将大大AP preciated！

Any help would be greatly appreciated!!!

推荐答案

有一个 plunker 有一处修改。而是采用非常极端的设置重载：真的，我们可以从本地 UI路由器德兴利润：

There is a plunker with one modification. Instead of using very extreme setting reload: true, we can profit from native ui-router desing:

重载的情况下，国家宣布其参数已经改变了

reload the state in case its declared param has changed

所以，这将是新的状态和控制器的定义：

So, this would be the new state and controller definition:

.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路由器解决方案的这里

这篇关于AngularJS - 角UI的重新加载路由器仅嵌套的观点，而不是父母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！