我知道这很长,但我需要在主要问题之前提供一些背景信息。我正在创建一个将分为两列的页面。这是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
)? / strong>我希望能够按下右栏中的按钮并仅重新排序数字,这是在projects.edit.surveys
州的决议中完成的,而不是清除左栏中的输入字段(而不是调用projects.edit
中的解析方法)。换句话说,我只想刷新右列projects.edit.surveys
状态,而不会影响左手projects.edit
状态中的任何内容。
任何帮助将不胜感激!!!
答案 0 :(得分:7)
有一个plunker有一个修改。我们可以从原生的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 })
}
}
}
}
})
从用户的角度来看,param正在改变但不是它的可见性 - 它是null或string.Empty ...检查调整和更多原生ui-router
解决方案 {{3 }}