Wie implementiert man eine Seitenanpassung in AngularJS?

In diesem Artikel wird hauptsächlich die Methode der adaptiven Höhe der AngularJS-Seite vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

Anforderungen

Im mit AngularJS erstellten Geschäftssystem werden Seitensprünge durch UI-View-Routing implementiert. Nach der Initialisierung und Eingabe des Inhaltsbereichs auf der rechten Seite erfordert adaptives Browsing.

Implementierungsplan

1. Direktive zu p hinzufügen, wo sich ui-view befindet, und die Höhe von p durch die element.css-Initialisierung in der Direktive berechnen , und aktualisieren Sie es dynamisch. p height

2. Direktive überwacht ($$watch) Angulars $digest, ermittelt die Körperhöhe in Echtzeit und weist Modell- oder element.css-Änderungen dynamisch zu

Option 1: Direktive und element.css adaptive height hinzufügen

1. Direktive erstellen

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

2.p-Element und Direktive hinzufügen

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

3 .Rendering

Originalschnittstelle: Die Höhe des rechten Bereichs ist adaptiver Inhalt, was zu einer schwarzen Hintergrundfarbe unten führt

Danach Anpassung: Der richtige Bereich Höhenadaptiver Browser

Lösung 2: $watch überwacht die Körpergröße und weist Werte zu, um die Körpergröße zu ändern

1. Erstellen Sie eine Größenänderungsanweisung

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. Fügen Sie die Größenänderungsanweisung zum p-Element hinzu

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

Ich hoffe, dass es für alle hilfreich ist alle in der Zukunft.

Verwandte Artikel:

So implementieren Sie die Panda-TV-Navigation mit jquery+css3

So implementieren Sie zeitgesteuerte Ausblenddialogfelder in jQuery

Detaillierte Interpretation der Trennung und Kombination von Vue-Administrator und Backend (Flasche)

Hintergrundbild in Vue festlegen

So verwenden Sie Vue + Less, um eine einfache Skin-Change-Funktion zu implementieren

Wie Sie Angular, React und Vue verwenden, um dieselbe Interviewfragenkomponente zu implementieren

Das obige ist der detaillierte Inhalt vonWie implementiert man eine Seitenanpassung in AngularJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!