我知道这很长,但是我需要在主要问题之前提供一些背景信息。我正在创建一个页面,该页面将分为两列。这是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状态,该状态具有如下所示的模板:
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状态。
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状态。用户将以不同的顺序看到数字,并且左栏中输入字段中的所有文本都将消失。
$state.go('projects.edit.surveys')
projects.edit.surveys
items
projects.surveys.html
$state.transitionTo($state.current, $state.params, { reload: true, inherit: true, notify: true })
在此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状态的任何内容。
任何帮助将不胜感激!!!
有一个改装的矮人。除了使用非常极端的设置reload: true,我们还可以从本机ui-router设计中受益:
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解决方案 在这里