我有一个具有 3 个 View (A、B、C)和 2 个状态(1,2)的应用
html
<div ui-view="A"></div>
<div ui-view="B"></div>
<div ui-view="C"></div>
这两种状态称为列表和创建。在这两种状态下, View A + B 的模板和 Controller 保持不变,但 View c 应该更改模板和 Controller 。我可以更改 View c 的内容,但它会刷新 View A 和 View B,即 Controller 中的内容再次运行。
组织路由器来防止这种情况的正确方法是什么?
目前为止的js
$urlRouterProvider.otherwise("/basestate/list");
$stateProvider
.state('baseState', function() {
url:"/basestate",
templateUrl: "basestate.html",
controller: 'BaseStateCtrl'
})
.state('baseState.list', function() {
url: "/list",
views: {
"viewA@baseState": {
templateUrl: "viewA.html"
controller: "ViewACtrl"
},
"viewB@baseState": {
templateUrl: "viewB.html"
controller: "ViewBCtrl"
},
"viewC@baseState": {
templateUrl: "list.html"
controller: "listCtrl"
}
}
})
.state('baseState.create', function() {
url: "/create",
views: {
"viewA@baseState": {
templateUrl: "viewA.html"
controller: "ViewACtrl"
},
"viewB@baseState": {
templateUrl: "viewB.html"
controller: "ViewBCtrl"
},
"viewC@baseState": {
templateUrl: "create.html"
controller: "createCtrl"
}
}
})
最佳答案
要实现这一点,您基本上需要将 viewA 和 viewC 卡住在 baseState
级别,并使该状态抽象:
.state('basestate', {
url: '/basestate',
abstract: true,
views: {
"viewA": {
templateUrl: "viewA.html",
controller: "ViewACtrl"
},
"viewB": {
templateUrl: "viewB.html",
controller: "ViewBCtrl"
},
"viewC": {
template: '<div ui-view="viewC_child"></div>'
}
}
})
请注意,对于 viewC
,我们正在创建一个占位符,其中将包含我们的嵌套 View (list
或 create
):
.state('basestate.list',{
url: "/list",
views: {
"viewC_child": {
templateUrl: "list.html",
controller: "ListCtrl"
}
}
})
.state('basestate.create', {
url: "/create",
views: {
"viewC_child": {
templateUrl: "create.html",
controller: "CreateCtrl"
}
}
})
检查这个plunkr并小心代码中的逗号:)
关于javascript - Angular-ui-router 嵌套 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23892458/