Question

我见过设计界面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隐藏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 -->

问题：不同的网址可以拥有相同的观看次数，但优先级倒置，请参阅：

因此，在小屏幕上，它可以正常工作，但在较大的屏幕上，在某些网址中，视图可以反转，（请参见上图），因此在HTML中，list.html和detail.html模板也将倒置。

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

Answer 1

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

关于这个问题的想法2几乎就是答案，但是我在使用相同视图但使用优先级相反的不同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>

Inside partial-detail.html ：

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

有效！：）

大屏幕的多个视图，小屏幕的单一视图

1 个答案: