angularjs – Angular ui路由器具有路由(状态)参数的多个视图

发布时间：2020-12-17 07:43:23 所属栏目：安全来源：网络整理

导读：我有一个页面,我显示两个不同的产品列表使用多个视图,每个具有控制器和模板文件.我的状态定义如下： .state('all_lists',{ url: '/lists',views: { '' : {templateUrl: 'my-lists.html'},'featured@all_lists' : {templateUrl: 'featured.html',controller:

我有一个页面,我显示两个不同的产品列表使用多个视图,每个具有控制器和模板文件.我的状态定义如下：

.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中,然后在相应的控制器中使用.

如果您更好地了解如何将分页参数添加到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",param2: null
        }
    })

现在您可以通过在相应的控制器中分别注入stateParams服务来使用参数.
注意：
另外你的产品状态根本不会有stateParam.

注意：但如果您尝试直接到达产品状态,它将不会被激活,因为它是抽象状态
如何通过在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>

这三个对象可以在三个控制器中的任意一个处理

> itemLength
> currentPage
> pageChanged()

缩略图和列表视图都将包含仅用于布局目的的标记.

<div>
    <div> Thumbnail or List markup </div> very simple you can play with bootstrap grid layout.
</div

更新1

对于这样的路线

//mydomain.com/products/featured-page_1/deals-age_2/perpage??_10/

使用我的解决方案,你可以处理这样的事情

//mydomain.com/products/featured/page_1/deals/age_2/

所以你的孩子将会是

$stateProvider
    .state("product",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
        }
})

在featuresCtrl中,您可以使用这些参数访问这些参数

$stateParam.number

在DealsCtrl中,您可以使用这些参数访问这些参数

$stateParam.number

在$rootscope中或在productHomeCtrl中保留该值

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!