Question

我有一个页面，我使用多个视图显示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参数方案实现并行状态。

＆＃13;

<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>

＆＃13;

Answer 1

不要将它作为多个视图，将它们作为子视图，父视图是抽象的。请看下面的代码，

$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 服务来使用参数。 注意：此外，您的产品状态根本无法使用 stateParams。

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

当前页

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", { 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

$ rootscope 或 productHomeCtrl
中的 perpage 值

Answer 2

您只需在网址上指定params并在控制器中调用它们

.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;
  }}
  }
 }
)

Angular ui路由器具有路由（状态）参数的多个视图

2 个答案:

更新1