如何在抽象状态模板中显示多个视图? [英] How do I show multiple views in an abstract state template?
问题描述
使用 Angularjs UI-Router 我正在尝试构建一个带有主视图和侧面细化/过滤结果视图的典型页面.
我已经对示例应用进行了分叉,现在修改它以具有显示过滤器视图和主视图的父抽象状态,以便我可以共享抽象状态解析的数据.
问题是我无法在不破坏范围继承的情况下显示过滤器视图.如果我添加 'views' 参数,它会破坏范围,那么我怎样才能让它发挥作用?
这是我的代码和Plunker
$stateProvider.state('应用程序', {摘要:真实,网址:'/应用程序',templateUrl: 'planning.html',控制器:功能($范围){$scope.planning = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }];$scope.filterPlanning = 函数(数据){var 输出 = $scope.planning;//测试过滤器output = $filter('filter')({ name: "Alice" });返回输出;}},/* 这打破了子视图继承的范围意见:{'':{templateUrl: 'applications.html'},'过滤器@应用程序':{templateUrl: 'applications.filters.html'}},*/onEnter:函数(){console.log("进入应用程序");}})
子状态:
.state('applications.list', {网址:'/列表',//加载到父模板的 ui-viewtemplateUrl: 'planning.list.html',onEnter:函数(){console.log("进入应用程序列表");}}).state('applications.map', {网址:'/地图',//加载到父模板的 ui-viewtemplateUrl: 'planning.map.html',onEnter:函数(){console.log("进入应用程序.map");}})
applications.html
<div class="span4"><div ui-view="过滤器"></div><div class="span8"><div ui-view></div>
我已经将列表、地图和过滤器视图构建为指令,所以我希望一旦我可以让这个演示工作,我就可以相对轻松地交换它们.
我想说,这里的问题是:
<块引用>任何controller
都属于view
而不属于state
所以这是调整后的代码:
.state('应用程序', {摘要:真实,网址:'/应用程序',//这里的 templateUrl 和控制器被跳过//未使用//templateUrl: 'applications.html',//控制器: ...意见:{'':{templateUrl: 'applications.html',控制器:函数($scope,$filter){$scope.planning = [{ id:0, name: "Alice" },{ id:1, name: "鲍勃" }];$scope.filterPlanning = 函数(数据){var 输出 = $scope.planning;//测试过滤器output = $filter('filter')({ name: "Alice" });返回输出;}},},'过滤器@应用程序':{templateUrl: 'applications.filters.html'}},
检查文档:
视图覆盖state 的模板属性
<块引用>如果你定义了一个视图对象,你状态的 templateUrl、template 和 templateProvider 将被忽略.因此,如果您需要这些视图的父布局,您可以定义一个包含模板的抽象状态,并在包含视图"对象的布局状态下定义一个子状态.
plunker 检查它在行动
Using Angularjs UI-Router I'm trying to build a typical page with a main view and a side refine/filter results view.
I've forked the sample app and now modifying it to have a parent abstract state that displays the filters view and the main view so that I can share the data that the abstract state resolves.
The problem is I cannot get the filters view to appear without breaking the scope inheritance. If I add the 'views' param it breaks the scope so how can I get this to work?
Here's my code and Plunker
$stateProvider
.state('applications', {
abstract: true,
url: '/applications',
templateUrl: 'planning.html',
controller: function($scope){
$scope.planning = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }];
$scope.filterPlanning = function(data) {
var output = $scope.planning;
// test filter
output = $filter('filter')({ name: "Alice" });
return output;
}
},
/* this breaks the scope from being inherited by the child views
views: {
'': {
templateUrl: 'applications.html'
},
'filters@applications': {
templateUrl: 'applications.filters.html'
}
},*/
onEnter: function(){
console.log("enter applications");
}
})
child states:
.state('applications.list', {
url: '/list',
// loaded into ui-view of parent's template
templateUrl: 'planning.list.html',
onEnter: function(){
console.log("enter applications.list");
}
})
.state('applications.map', {
url: '/map',
// loaded into ui-view of parent's template
templateUrl: 'planning.map.html',
onEnter: function(){
console.log("enter applications.map");
}
})
applications.html
<div class="row">
<div class="span4">
<div ui-view="filters"></div>
</div>
<div class="span8">
<div ui-view></div>
</div>
</div>
I already have the list, map and filters views built as directives so I'm hoping once I can get this demo working I can swap them in relatively easily.
There is updated plunker
I would say, that the issue here is:
Any
controller
belongs toview
not to state
so this is the adjusted code:
.state('applications', {
abstract: true,
url: '/applications',
// templateUrl and controller here are SKIPPED
// not used
// templateUrl: 'applications.html',
// controller: ...
views: {
'': {
templateUrl: 'applications.html',
controller: function($scope, $filter){
$scope.planning = [
{ id:0, name: "Alice" },
{ id:1, name: "Bob" }
];
$scope.filterPlanning = function(data) {
var output = $scope.planning;
// test filter
output = $filter('filter')({ name: "Alice" });
return output;
}
},
},
'filters@applications': {
templateUrl: 'applications.filters.html'
}
},
Check the doc:
Views override state's template properties
If you define a views object, your state's templateUrl, template and templateProvider will be ignored. So in the case that you need a parent layout of these views, you can define an abstract state that contains a template, and a child state under the layout state that contains the 'views' object.
The plunker to check it in action
这篇关于如何在抽象状态模板中显示多个视图?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!