Изменение вида в зависимости от размера экрана

Я осознаю подобный вопрос спрашивают перед:Изменение вида в зависимости от размера экрана

Change the templateUrl of directive based on screen resolution AngularJS

Это было первым попросил больше года назад и с тех пор AngularJS был немного изменился. Мне любопытно узнать, есть ли какие-либо другие способы достижения чего-то подобного, поскольку я не нашел много информации об обмене шаблонами, так что, возможно, я лаяю неправильное дерево здесь.

У меня есть одностраничное приложение без каких-либо маршрутов.

HTML:

<body ng-app="App"> 
    // lots of html same for both desktop/mobile 
    <my-dir></my-dir> 
    // even more here 
</body>

шаблон 1:

<p>Mobile</p>

шаблон 2:

<p>Desktop</p>

Я хотел бы оказать шаблону 1 когда экран опускается ниже 700px и шаблон 2 в противном случае. Шаблоны меняют то, что находится внутри my-dir директива. Например, шаблон 1 отображает список и шаблон 2 создает таблицу.

Еще одно требование было бы сделать это реагировать, если это возможно (ака шаблонов будет меняться при изменении размеров окна)

На данный момент я могу использовать решение из приведенных выше вопросов, но есть какие-либо другие способы, чтобы сделать это ?

источник

2015-10-23 Kocur4d

Hava, который вы рассмотрели с помощью [Bootstrap] (http://getbootstrap.com)? – lotusdragon

Да, есть два варианта, на которые мы сейчас смотрим: один - это замена шаблона во втором, это чистый CSS. Там может быть много изменений в структуре, поэтому я проверяю, возможно ли изменение шаблона/директивы с большим количеством взлома. – Kocur4d

В контроллере:

$scope.includeDesktopTemplate = false; 
$scope.includeMobileTemplate = false; 
var screenWidth = $window.innerWidth; 

if (screenWidth < 700){ 
    $scope.includeMobileTemplate = true; 
}else{ 
    $scope.includeDesktopTemplate = true; 
}

шаблон HTML:

<body ng-app="App"> 
    <p ng-if="includeMobileTemplate">Mobile</p> 
    <p ng-if="includeDesktopTemplate">Desktop</p> 
</body>

Надеется, что это помогает

источник

2015-10-23 13:21:18

работает нормально при загрузке, но я могу заставить его работать с живыми изменениями без запуска цикла дайджеста по угловому. React version: http://plnkr.co/edit/PYOQ23X2Xu93CaJMcKij?p=preview – Kocur4d

@ Kocur4d, я не уверен, но я не думаю, что вы можете заставить его работать, не выполняя цикл дайджеста. Один из способов сделать это можно использовать '$ watch', но это все равно приводит к перевариванию. –

Я имею в виду не запускать его с помощью $ scope. $ Apply. Я лично считаю, что нужно использовать $ scope. $ Применять себя как немного взломанный (может быть, это только я), но в целом я думаю, что вы всегда можете переделать его, чтобы не использовать его. – Kocur4d

Вы можете добавить окно изменения размера и прокрутки слушателя событий на my-dir директиве:

angular.module("App").directive('myDir', ['$window', '$timeout', function($window, $timeout){ 

    return { 
     restrict: 'EA', 
     scope: {}, 
     template:'<div> 
      <p ng-if="showFirstTemplate">Mobile</p> 
      <p ng-if="showSecondTemplate">Desktop</p> 
      </div>', 
     link: function(scope, element, attr){ 

      function checkTemplateVisible(event){ 

       //use $timeout to make sure $apply called in a time manner 
       $timeout(function(){ 

         //pageYoffset is equal to window scroll top position 
         if($window.pageYOffset > 700){ 
          scope.showFirstTemplate = true; 
          scope.showSecondTemplate = false; 
         }else{ 
          scope.showFirstTemplate = false; 
          scope.showSecondTemplate = true; 
         } 
       }) 

      }) 

      //scroll event make sure checkTemplateVisible called on browser scrolling 
      $window.on('scroll', checkTemplateVisible) 

      //resize event make sure checkTemplateVisible called on browser resizing 
      $window.on('resize', checkTemplateVisible) 
     } 
    } 


}])

источник

2015-10-23 18:23:02 MarkoCen

ах Я был немного занят - я проверю его на этой неделе – Kocur4d

Изменение вида в зависимости от размера экрана

ответ

Смежные вопросы