javascript 使用 ui-router 的 angular.js，如何只重新加载一个视图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17476694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
With angular.js using ui-router, how to only reload one view?
提问by ORL
I have a fairly simple todo app using angular.js for which I am using the ui-router library. I looked through the ui-router example on github (https://github.com/angular-ui/ui-router/tree/master/sample) but was unable to figure out what I am doing wrong. In my app I have a sidebar navigation view (with the list of things todo) and a content view (which displays the todo item's details when clicked). The problem I have is that when I navigate to /todo/exampleItem the content view updates and the navigation panel is reloaded as well. This doesn't effect the functionality of the app but I would like to avoid the navigation panel flickering each time you click on an item.
我有一个使用 angular.js 的相当简单的待办事项应用程序，我正在使用 ui-router 库。我查看了 github ( https://github.com/angular-ui/ui-router/tree/master/sample)上的 ui-router 示例，但无法弄清楚我做错了什么。在我的应用程序中，我有一个侧边栏导航视图（带有待办事项列表）和一个内容视图（单击时显示待办事项的详细信息）。我遇到的问题是，当我导航到 /todo/exampleItem 时，内容视图会更新并且导航面板也会重新加载。这不会影响应用程序的功能，但我想避免每次单击项目时导航面板闪烁。
Here is my code to handle the state changes:
这是我处理状态更改的代码：
app.config(function ($stateProvider) {
$stateProvider
.state('todo', {
url: "/todo",
views: {
"navPanel": {
templateUrl: "./navPanel.html",
controller: 'PanelController'
}
}
})
.state('todo/:item', {
url: "/todo/:item",
views: {
"PanelView": {
templateUrl: "./navPanel.html",
controller: 'PanelController'
},
"ContentView": {
templateUrl: "./content.html",
controller: 'ContentController'
}
}
})
});
In my index.html my views are set up as follows:
在我的 index.html 中，我的视图设置如下：
<div class="column" data-ui-view="PanelView"></div>
<div class="column" data-ui-view="ContentView"></div>
Is there some way I can stop the navPanel view from being reloaded each time a new item is clicked?
有什么方法可以阻止每次单击新项目时重新加载导航面板视图？
采纳答案by Sydney
Based on the voted answer of that question angularjs ui-router - how to build master state which is global across app
基于该问题的投票答案angularjs ui-router - how to build master state which is global across app
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('todo', {
abstract: true,
views: {
"navPanel": {
templateUrl: "./navPanel.html",
controller: 'PanelController'
}
}
})
.state('todo/:item', {
url: "/todo/:item",
views: {
"ContentView@": {
templateUrl: "./content.html",
controller: 'ContentController'
}
}
})
}]);
