Comment implémenter l'adaptation de page dans AngularJS ?

Cet article présente principalement la méthode de hauteur adaptative de la page angulairejs. Maintenant, je le partage avec vous et le donne comme référence.

Exigences

Dans le système d'entreprise construit avec angulairejs, les sauts de page sont implémentés via le routage ui-view Après l'initialisation et l'entrée dans le système, la zone de contenu à droite. nécessite une navigation adaptative à la hauteur de l'appareil.

Plan de mise en œuvre

1. Ajouter une directive à p où se trouve ui-view, calculer la hauteur de p via l'initialisation element.css dans la directive , et mettez-le à jour dynamiquement p hauteur

2. surveille la directive ($$watch) $digest d'angular, obtient la taille du corps en temps réel, attribue dynamiquement les modifications de modèle ou d'élément.css

Option 1 : Ajouter une directive et une hauteur adaptative element.css

1 Créer une directive

define([ "app" ], function(app) {
  app.directive('autoHeight',function ($window) {
    return {
      restrict : 'A',
      scope : {},
      link : function($scope, element, attrs) {
        var winowHeight = $window.innerHeight; //获取窗口高度
        var headerHeight = 80;
        var footerHeight = 20;
        element.css('min-height',
            (winowHeight - headerHeight - footerHeight) + 'px');
      }
    };
  });
  return app;
});

Élément 2.p et ajouter une directive.

<p ui-view auto-height></p>

3. Image d'effet

Interface originale : La hauteur de la zone de droite est un contenu adaptatif, ce qui donne une couleur de fond noire en dessous

Après ajustement : navigateur adaptatif à la hauteur pour la zone droite

Option 2 : $watch surveille la taille du corps et attribue une valeur pour modifier la taille

1 .Créer une directive de redimensionnement

var app = angular.module('miniapp', []);

function AppController($scope) {
  /* Logic goes here */
}

app.directive('resize', function ($window) {
  return function (scope, element) {
    var w = angular.element($window);
    scope.getWindowDimensions = function () {
      return { 'h': w.height(), 'w': w.width() };
    };
    scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
      scope.windowHeight = newValue.h;
      scope.windowWidth = newValue.w;

      scope.style = function () {
        return { 
          'height': (newValue.h - 100) + 'px',
          'width': (newValue.w - 100) + 'px' 
        };
      };

    }, true);

    w.bind('resize', function () {
      scope.$apply();
    });
  }
})

2. Ajoutez une directive de redimensionnement

<p ng-app="miniapp" ng-controller="AppController" ng-style="style()" resize>
  window.height: {{windowHeight}} <br />
  window.width: {{windowWidth}} <br />
</p>

à l'élément p Ce qui précède est ce que j'ai compilé pour tout le monde. . J’espère que cela sera utile à tout le monde à l’avenir.

Articles connexes :

Comment implémenter la navigation Panda TV à l'aide de jquery+css3

Comment implémenter des boîtes de dialogue de masquage chronométré dans jQuery

Interprétation détaillée de la séparation et de la combinaison de vue-admin et backend (flask)

Définition de l'image d'arrière-plan dans Vue

Comment utiliser vue + less pour implémenter une simple fonction de changement de skin

Comment utiliser angulaire, réagir et vue pour implémenter le même composant de question d'entretien

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!