大屏幕多视图，小屏幕单视图

Posted 2023-03-06

【中文标题】大屏幕多视图，小屏幕单视图

【英文标题】：Multiple views for large screens, single view for small screens

【发布时间】：2016-12-08 10:35:39

【问题描述】：

看过here的设计界面，很喜欢。

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

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

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

我有基本的想法：

想法 1（不太好）：我正在考虑创建多条路线，然后根据屏幕尺寸选择一条或另一条路线。

内部角度配置

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');
       
   
);

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

想法 2：我正在考虑声明主要和次要视图，然后我可以用 CSS 隐藏次要视图：

内部角度配置

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

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

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

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

【问题讨论】：

您能采用directive 的方法吗？将每个视图注入一个指令，然后根据屏幕大小禁用该指令属性/元素。

Inject each view into a directive：你会怎么做？ （大约）

我认为@tcasey 的意思是您为这两种情况创建一个视图/页面。本质上，为“桌面”大小创建视图，然后使用media 查询来显示/隐藏/调整小于特定大小（“移动”）屏幕的元素 - 有关 CSS 媒体查询的信息，请参阅此链接：@ 987654325@

为同一情况创建并维护 2 个单独的视图和控制器操作最终会适得其反。想想当你需要更新一个视图时，你必须匹配两者的方法和数据输出——在某些时候，两者会变得不同步，并且会遗漏一些东西。在两种情况下使用相同的视图，并让它响应屏幕尺寸的变化

Use the same view for both situations, and just make it responsive to screen size changes : 如果我在这两种情况下使用相同的视图，就会出现代码重复，不是吗？因为，目前，在两个不同的 URL 上，我使用相同的视图，但主要和次要模板只是颠倒了，如上图所示

【参考方案1】：

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

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

ui-router 允许使用multiple named views 来获取祖先，所以我必须创建一段声明 ui-views 的 html：

内部角度配置：

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

有效！ :)