大屏多屏，小屏单屏

Question

看过一个设计界面here，很喜欢

我是用 AngularJS 和 ui-router 做的，它允许在一个页面上有多个视图。

我的智能手机有问题，因为我只想显示一个视图，而不是两个 tablets/desktops。

问题： 在小屏幕上只显示一个视图，在大屏幕上显示两个视图的最佳方式是什么？

我有基本的想法:

想法 1（不太好）：我想创建多个路由，然后根据屏幕大小路由到一个或另一个路由。

里面angular配置

app.config(function($stateProvider) {
  $stateProvider
    .state('listForLargeScreens', {
      url: "/listForLargeScreens",
      views: {
        "primary": { templateUrl: "list.html" },
        "secondary": { templateUrl: "detail.html" }
      }
    })
    .state('listForSmallScreens', {
      url: "/listForSmallScreens",
      views: {
        "primary": { templateUrl: "list.html" }
      }
    })
    ...;

随机控制器内部

app.controller('RandomCtrl', function ($scope, $state) {
   $scope.changePage = function () {
       if (isLargeScreen) {
           $state.go('indexForLargeScreens');
       } else {
           $state.go('indexForSmallScreens');
       }
   }
});

问题 : 这个想法在我看来也是"dirty"维护。

想法 2 : 我想声明主要和次要视图，然后我可以用 CSS 隐藏第二个 CSS :

里面angular配置

app.config(function($stateProvider) {
  $stateProvider
    .state('list', {
      url: "/",
      views: {
        "primary": { templateUrl: "list.html" },
        "secondary": { templateUrl: "detail.html" }
      }
    })
    .state('detail', {
      url: "/detail/:id",
      views: {
        "secondary": { templateUrl: "list.html" },
        "primary": { templateUrl: "detail.html" }
      }
    })
    ...;

里面html

 <div ui-view="main"></div>
 <div ui-view="secondary"></div> <!-- For small screens, hide this view with CSS -->

问题：不同的 URL 可以有相同的视图，但优先级倒置，参见：

因此，在小屏幕上，它可以工作，但在大屏幕上，在某些 URL 中，视图可以反转（见上图），因此在 HTML、list.html 和detail.html 模板也将被反转。

如果我可以在某些视图上反转 <div ui-view="primary"></div> 和 <div ui-view="secondary"></div> 就可以解决问题...

Answer 1

我刚刚在 scotch.io 上找到了一段代码，它是解决该问题的关键。

关于问题的想法 2 几乎就是答案，但我遇到了不同 URL 的问题，这些 URL 使用相同的视图，但优先级倒置。

ui-router 允许 multiple named views, 获得祖先，所以我必须创建一块 html 声明 ui-views :

内部 angular 配置 :

$stateProvider.state('list', {
    url: '/list',
    views: {
        '': { templateUrl: 'partial-list.html' },
        'primary@list': { 
            templateUrl: 'list.html',
            controller: 'ListCtrl as ctrl'
        },
        'secondary@list': { 
            templateUrl: 'detail.html',
            controller: 'DetailCtrl as ctrl'
        }
    }
}).state('detail', {
    url: '/detail/:id',
    views: {
        '': { templateUrl: 'partial-detail.html' },
        'primary@list': { 
            templateUrl: 'detail.html',
            controller: 'DetailCtrl as ctrl'
        },
        'secondary@list': { 
            templateUrl: 'list.html',
            controller: 'ListCtrl as ctrl'
        }
    }
});

内部部分-list.html :

<div ui-view="primary"></div>
<div ui-view="secondary" class="hide-it-for-small-screens"></div>

内部部分-detail.html :

<div ui-view="secondary" class="hide-it-for-small-screens"></div>
<div ui-view="primary"></div>

有效！ :)

大屏多屏，小屏单屏

Multiple views for large screens, single view for small screens

javascript

css

multiple-views

angularjs

angular-ui-router