使用ui-router在一个页面上显示多个状态

时间：2021-10-07 10:56:19

currently i am investigating the possibility to configure ui-router for the following scenario. It would be great, if someone have an idea how to achieve this.

目前我正在研究为以下场景配置ui-router的可能性。如果有人知道如何实现这一点，那就太好了。

I have a simple one pager layout with a navigation. Each navigation item have a div box with content. How i can now define several states on one page (For each navigation item one state with a separate controller and template)?

我有一个带导航的简单的一个寻呼机布局。每个导航项都有一个包含内容的div框。我现在如何在一个页面上定义几个状态（对于每个导航项目，一个状态具有单独的控制器和模板）？

Afterwards i would like implement a solution, when i click on a navigation item to scroll to the corresponding div container. Basically this is made with HTML anchors, but how i can solve this with ui-router? Or isn't this possible and i have to create one state with separate views?

之后我想实现一个解决方案，当我点击导航项目滚动到相应的div容器。基本上这是用HTML锚点制作的，但我怎么能用ui-router解决这个问题呢？或者这不可能，我必须创建一个具有单独视图的状态？

Below a example image to show you the wanted layout:

在示例图片下方显示所需的布局：

使用ui-router在一个页面上显示多个状态

Hopefully someone have a solution for that.

希望有人有解决方案。

Thanks in advance,
xyNNN

谢谢，xyNNN

1 个解决方案

#1

1  

With ui-router you can have multiple views on one page. So you will be able to do something like this:

使用ui-router，您可以在一个页面上拥有多个视图。所以你将能够做到这样的事情：

$stateProvider
.state('main',{
  views: {
    'contentSite1': {
      templateUrl: 'site1.html',
      controller: function($scope){}
    },
    'contentSite2': {
      templateUrl: 'site2.html',
      controller: function($scope){}
    },
    'contentSite3': {
      templateUrl: 'site3.html',
      controller: function($scope){}
    },
  }
});

Here is the link with more explanation https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

这是更多解释的链接https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

#1

1  

With ui-router you can have multiple views on one page. So you will be able to do something like this:

使用ui-router，您可以在一个页面上拥有多个视图。所以你将能够做到这样的事情：

$stateProvider
.state('main',{
  views: {
    'contentSite1': {
      templateUrl: 'site1.html',
      controller: function($scope){}
    },
    'contentSite2': {
      templateUrl: 'site2.html',
      controller: function($scope){}
    },
    'contentSite3': {
      templateUrl: 'site3.html',
      controller: function($scope){}
    },
  }
});

Here is the link with more explanation https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

这是更多解释的链接https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

标签：

相关文章