Abd*_*eeb 14 multiple-views angularjs angular-ui-router
我有一个页面,我使用多个视图显示2个不同的产品列表,每个视图都有一个控制器和模板文件.我的州定义是这样的:
.state('all_lists', {
url: '/lists',
views: {
'' : {templateUrl: 'my-lists.html'},
'featured@all_lists' : {templateUrl: 'featured.html', controller: 'featuredCtrl'},
'deals@all_lists' : {templateUrl: 'deals.html', controller: 'dealsCtrl'}
}
}
)
每个单独的列表顶部都有分页和排序过滤器,这些分页和排序过滤器作为状态参数添加到URL中.请告诉我如何为状态视图定义这些参数,以便将它们添加到URL中,然后在各个控制器中使用.
如果您更好地了解如何使用添加到网址的分页参数显示此类产品列表,请分享您的想法.任何帮助将不胜感激.
谢谢
注意: 请注意,我需要在1页上显示这两个列表.它的主页和特色项目列表,然后在热门交易下面显示项目列表,这两个列表都有分页,排序和其他一些过滤器.URL将是这样的.mydomain.com/products/featured-page_1/deals-page_2/perpage_10/
注2: 在经过大量研究和调查后,我发现这是一个平行状态的明显案例.请告诉我如何使用我当前使用的URL参数方案实现并行状态.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div id="content">
<h1>Products Homepage</h1>
<h3>Some common filters for both lists</h3>
<div id="featured">
<h2>Featured List</h2>
<div>pagination and other filters</div>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
<div id="deals">
<h2>Hot Deals List</h2>
<div>pagination and other filters for hot deals</div>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
</div>
</body>
</html>不要将它作为多个视图,将它们作为子视图,父视图是抽象的.看下面的代码,
$stateProvider
.state("product", {
url: '/product',
templateUrl: "/Views/productHome.html",
abstract: true,
controller: "productHomeCtrl"
})
.state('product.thumbnailview', {
url: '/producttv',
templateUrl: "/Views/thumbnailview.html",
controller: "thumbnailViewCtrl",
params: {
param1: null,
param2: null
}
})
.state('product.listview', {
url: '/productlv',
templateUrl: "Views/listview",
controller: "listViewCtrl",
params: {
param1: null,
param2: null
}
})
现在,您可以通过在各自的控制器中单独注入stateParams服务来使用params . 注意: 您的产品状态也永远不会有 stateParams.
注意:但是如果你试图直接达到产品状态,它就不会被激活,因为它是抽象状态你怎么能通过在全局的productHome.html或相应的视图中使用标记来处理分页.
如果您在productHome.html中保留分页,您仍然可以使用$ scope.$ parent.productList访问productDetails数组并重用相同的范围变量.
所以在这种情况下,您的productHome.html会喜欢这个
<div>
<div > MENU OPTIONS </div>
<div ng-view> </div>
<ul uib-pagination total-items="itemLength" ng-model="currentPage" ng-change="pageChanged()"></ul>
</div>
这三个对象可以在三个控制器中的任何一个中处理
缩略图和列表视图都将包含仅用于布局目的的标记.
<div>
<div> Thumbnail or List markup </div> very simple you can play with bootstrap grid layout.
</div
对于像这样的路线
//mydomain.com/products/featured-page_1/deals-age_2/perpage??_10/
使用我的解决方案,你可以处理这样的事情
//mydomain.com/products/featured/page_1/deals/age_2/
所以你的孩子将是
$stateProvider
.state("product", {
url: '/product',
templateUrl: "/Views/productHome.html",
abstract: true,
controller: "productHomeCtrl"
})
.state('product.featured/', {
url: '/featured/:number',
templateUrl: "/Views/featured.html",
controller: "featuredCtrl",
params: {
number: null,
}
})
.state('product.deals', {
url: '/deals/:number',
templateUrl: "Views/deals.html",
controller: "dealsCtrl",
params: {
number: null
}
})
在featuredCtrl中,您可以使用
$stateParam.number
在dealsCtrl中,您可以使用以下方式访问这些参数
$stateParam.number
有perpage在价值$ rootscope或productHomeCtrl
您只需要在 url 上指定参数并在控制器中调用它们
.state('all_lists', {
url: '/lists?dealPage&featPage&otherParam',
views: {
'' : {templateUrl: 'my-lists.html'},
'featured@all_lists' : {templateUrl: 'featured.html', controller: 'featuredCtrl'},
'deals@all_lists' : {templateUrl: 'deals.html', controller: function($scope, $stateParams) {
$scope.page= $stateParams.dealPage;
$scope.otherParam= $stateParams.otherParam;
}}
}
}
)