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

时间：2022-02-24 03:57:36

I have a page where I show 2 different lists of products using multiple views with each having a controller and template file. My state definition is like this:

我有一个页面，我使用多个视图显示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'}
      }
     }
    )

Each individual list has pagination and sorting filters at the top and these pagination and sorting filters are added to the URL as state parameters. Please tell me how to define these parameters for views of a state so that they can be added to URL and then used in the respective controllers.

每个单独的列表顶部都有分页和排序过滤器，这些分页和排序过滤器作为状态参数添加到URL中。请告诉我如何为状态视图定义这些参数，以便可以将它们添加到URL，然后在相应的控制器中使用。

If you have any better idea of displaying such a list of products with pagination parameters added to URL, please share your ideas. Any help will be greatly appreciated.

如果您有更好的想法显示添加到网址的分页参数的产品列表，请分享您的想法。任何帮助将不胜感激。

Thanks

谢谢

NOTE: Please note that, I need to display both the lists on 1 page. Its kind of a homepage and featured Items list and then below that hot deals Items list is displayed and both of these lists have pagination, sorting and few other filters. URL will be something like this. mydomain.com/products/featured-page_1/deals-page_2/perpage_10/

注意：请注意，我需要在1页上显示这两个列表。它的主页和特色项目列表，然后在热门交易下面显示项目列表，这两个列表都有分页，排序和其他一些过滤器。 URL将是这样的。 mydomain.com/products/featured-page_1/deals-page_2/perpage_10/

NOTE 2: After researching a lot and investigating, I have found out that this a clear case of Parallel States. Please tell me how to implement parallel states using the URL parameters scheme I am using currently.

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

2 个解决方案

#1

6  

Instead of having it as multiple views, Have them as child views with parent being abstract. Look at the code below,

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

$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
        }
    })

Now you can use the params by injecting stateParams service separately in your respective controllers. Note: Also your product State can never have stateParams at all.

现在，您可以通过在各自的控制器中单独注入stateParams服务来使用params。注意：您的产品状态也永远不会有stateParams。

Note: But if you try to reach to product state directly it will not get activated because it is abstract state How ever you can handle pagination by having the markup in either productHome.html globally or the respective views.

注意：但是如果你试图直接达到产品状态，它就不会被激活，因为它是抽象状态你怎么能通过在全局的productHome.html或相应的视图中使用标记来处理分页。

If your keeping the pagination in productHome.html you can still access the productDetails array using $scope.$parent.productList and reuse the same scope variable.

如果您在productHome.html中保留分页，您仍然可以使用$ scope。$ parent.productList访问productDetails数组并重用相同的范围变量。

So in this case you will your productHome.html will like this

所以在这种情况下，你的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>

These three objects can be handled in any of the three controllers

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

  1. itemLength
  2. itemLength
  3. currentPage
  4. 当前页面
  5. pageChanged()
  6. pageChanged（）

Both thumbnails and list view will contain markups for the layout purpose only.

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

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

Update 1

For a route like this

对于像这样的路线

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

Using my solution you can handle it something like this

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

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

So your child states will be

所以你的孩子将是

$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
        }
})

In the featuredCtrl you can access those parameters using

在featuredCtrl中，您可以使用。访问这些参数

$stateParam.number

In the dealsCtrl you can access those parameters using

在dealsCtrl中，您可以使用以下方式访问这些参数

$stateParam.number

Have the perpage value in the $rootscope or in the productHomeCtrl

在$ rootscope或productHomeCtrl中有perpage值

#2

2  

You just need to specify the params on the url and call them in the controller

您只需要在URL上指定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;
  }}
  }
 }
)

#1

6  

Instead of having it as multiple views, Have them as child views with parent being abstract. Look at the code below,

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

$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
        }
    })

Now you can use the params by injecting stateParams service separately in your respective controllers. Note: Also your product State can never have stateParams at all.

现在，您可以通过在各自的控制器中单独注入stateParams服务来使用params。注意：您的产品状态也永远不会有stateParams。

Note: But if you try to reach to product state directly it will not get activated because it is abstract state How ever you can handle pagination by having the markup in either productHome.html globally or the respective views.

注意：但是如果你试图直接达到产品状态，它就不会被激活，因为它是抽象状态你怎么能通过在全局的productHome.html或相应的视图中使用标记来处理分页。

If your keeping the pagination in productHome.html you can still access the productDetails array using $scope.$parent.productList and reuse the same scope variable.

如果您在productHome.html中保留分页，您仍然可以使用$ scope。$ parent.productList访问productDetails数组并重用相同的范围变量。

So in this case you will your productHome.html will like this

所以在这种情况下，你的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>

These three objects can be handled in any of the three controllers

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

  1. itemLength
  2. itemLength
  3. currentPage
  4. 当前页面
  5. pageChanged()
  6. pageChanged（）

Both thumbnails and list view will contain markups for the layout purpose only.

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

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

Update 1

For a route like this

对于像这样的路线

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

Using my solution you can handle it something like this

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

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

So your child states will be

所以你的孩子将是

$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
        }
})

In the featuredCtrl you can access those parameters using

在featuredCtrl中，您可以使用。访问这些参数

$stateParam.number

In the dealsCtrl you can access those parameters using

在dealsCtrl中，您可以使用以下方式访问这些参数

$stateParam.number

Have the perpage value in the $rootscope or in the productHomeCtrl

在$ rootscope或productHomeCtrl中有perpage值

#2

2  

You just need to specify the params on the url and call them in the controller

您只需要在URL上指定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;
  }}
  }
 }
)
标签：

相关文章