AngularJS – Angular UI-Router只重新加载嵌套视图,而不是父进

发布时间：2020-12-17 07:45:44 所属栏目：安全来源：网络整理

导读：我知道这是相当长的时间,但我需要在我的主要问题之前提供一些上下文.我正在创建一个分为两列的页面.以下是ui路由器代码： $urlRouterProvider.otherwise("/projects/edit") $stateProvider .state('projects',{ url: "/projects",template: "div ui-view/div

我知道这是相当长的时间,但我需要在我的主要问题之前提供一些上下文.我正在创建一个分为两列的页面.以下是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",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>

用户将被显示两列.左列将只有一个输入字段和按钮,按下该按钮将会将用户转换到其他路由状态.

当我们转换到projects.edit状态时,它的控制器将调用$state.go(‘projects.edit.surveys’),它将在右侧列中设置它的嵌套视图. projects.edit.surveys状态将首先按随机顺序解析一个数组,它将作为一个名为items的参数传入控制器.然后将projects.surveys.html部分放置在右侧列中.它将以随机顺序显示数字列表,并具有一个按钮,调用$state.transitionTo($state.current,{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方法)在projects.edit).换句话说,我只想刷新正确的列project.edit.surveys状态,而不影响任何在左边的project.edit状态.

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

有一个 plunker有一个修改.而不是使用非常极端的设置重新加载：真的,我们可以从本机ui路由器设计获利：

reload the state in case its declared param has changed

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

.state('projects.edit.surveys',{
      resolve: {
        ... // unchanged
      },// here we declare param trigger
      url: "/surveys/{trigger}",views: { 
      '' : { 
            templateUrl: "projects.surveys.html",$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,notify: true })
              }
            }
        }
      }
    })

从用户的角度来看,param正在改变而不是它的可见性 – 它是null或string.Empty …检查调整和更多的本机ui-router解决方案here

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!