3

I have seen a design interface here, and I liked it.

enter image description here

I was doing it with AngularJS, and ui-router which allows to have multiple views on a single page.

I have an issue for smartphone, because I want to display only one view, not two like tablets/desktops.

Question : What would be the best way to display only one view for small screens, and two for larger screens ?

I had basic ideas :

Idea 1 (not so so good) : I was thinking to create multiple routes, then route to one or the other route depending the screen size.

Inside angular config

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

Inside a random controller

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

Problem : this idea seems to me too "dirty" for maintaining.

Idea 2 : I was thinking to declare primary and secondary views, then I could hide with CSS the secondary one with CSS :

Inside angular config

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

Inside html

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

Problem : different URLS can have the same views, but with inverted priorities, see :

enter image description here

So, on small screens, it could work, but on larger screens, in some URLs, views can be inverted, (see the image above), so in HTML, list.html and detail.html templates will be inverted too.

It could solve the problem if I could invert <div ui-view="primary"></div> and <div ui-view="secondary"></div> on some views...

4

1 回答 1

0

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

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

ui-router 允许使用多个命名视图来获取祖先，因此我必须创建一段声明 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>

有用 ！:)

于 2016-08-03T14:15:49.643 回答