javascript - 大屏多屏，小屏单屏

Question

我看过一个设计界面here ，我喜欢它。

我是用 AngularJS 做的，ui-router这允许在单个页面上有多个 View 。

我有智能手机的问题，因为我只想显示一个 View ，而不是像平板电脑/台式机那样的两个 View 。

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

我有基本的想法:

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

在随机 Controller 中

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

问题:这个想法在我看来太“肮脏”而无法维护。

想法 2:我想声明主要和次要 View ，然后我可以用 CSS 隐藏次要 View :

内部 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 可以有相同的 View ，但优先级倒置，参见:

因此，在小屏幕上，它可以工作，但在大屏幕上，在某些 URL 中， View 可以反转(见上图)，因此在 HTML 中，list.html和 detail.html模板也会被反转。

如果我能反转<div ui-view="primary"></div>就可以解决问题和 <div ui-view="secondary"></div>关于一些观点...

Answer 1

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

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

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

内部 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'
        }
    }
});

在 partial-list.html 中:

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

在 partial-detail.html 中:

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

有效! :)