Modifier l'affichage en fonction de la taille de l'écran

Je suis au courant d'une question similaire posée avant:

Modifier la templateUrl de la directive basée sur la résolution de l'écran AngularJS

Ce fut d'abord demandé plus d'un an et, depuis lors, AngularJS ai un peu changé. Je suis curieux de savoir si il y a d'autres façons de réaliser quelque chose de similaire que je n'ai pas trouvé beaucoup d'informations sur templateUrl échange, donc peut-être que je suis aboiements le mauvais arbre ici.

J'ai une single page application, sans routes.

html:

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

modèle 1:

<p>Mobile</p>

modèle 2:

<p>Desktop</p>

Je tiens à rendre modèle 1 lorsque l'écran passe en dessous de 700 pixels et modèle 2 autrement. Les modèles de changement de ce qui est à l'intérieur de mon-dir de la directive. Par exemple Modèle 1 rend liste et 2 du modèle le rend tableau.

Une autre condition serait de les adapter, si possible(aka modèles de changement comme vous le redimensionnement de la fenêtre)

Au moment où je peux utiliser la solution de questions ci-dessus, mais existe-il d'autres façons de le faire?

Hava-vous envisagé d'utiliser Bootstrap ?
Oui, il y a deux options, nous sommes à la recherche à maintenant - one est un modèle de permutation deuxième est un pur CSS. Il pourrait y avoir beaucoup de changements à la structure afin je suis de vérifier si le modèle/la directive échange est possible avec beaucoup de piratage

OriginalL'auteur Kocur4d | 2015-10-23

  1. 8

    Dans votre contrôleur:

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

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

    modèle html:

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

    Espère que cela aide

    il fonctionne très bien sur la charge, mais je peux le faire fonctionner sur live redimensionne sans courir digérer cycle sur angulaire. Réagir version: plnkr.co/modifier/PYOQ23X2Xu93CaJMcKij?p=preview
    Je ne suis pas sûr, mais je ne pense pas que vous pouvez le faire sans courir digérer cycle. Une façon de faire qui pourraient être à l'aide de $watch, mais qui fonctionne digest de toute façon.
    Je veux dire, pas à démarrer mon auto avec $scope.$s'appliquent. Personnellement, je trouve la nécessité de l'exécution de $scope.$appliquer vous-même comme un peu un hack(c'est peut-être juste moi), mais en général, je pense que vous pouvez toujours adapter afin de ne pas l'utiliser.

    OriginalL'auteur Jahongir Rahmonov

  2. 4

    Vous pouvez ajouter de la fenêtre de les redimensionner et de les faire défiler écouteur d'événement sur my-dir directive:

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


}])
    ah j'ai été peu occupé - je vais le tester cette semaine

    OriginalL'auteur MarkoCen