How to implement page adaptation in angularjs?

This article mainly introduces the method of adaptive height of angularjs page. Now I will share it with you and give you a reference.

Requirements

In the business system built with angularjs, page jumps are implemented through ui-view routing. After initializing and entering the system, the content area on the right needs adaptive browsing. device height.

Implementation plan

1. Add directive to p where ui-view is located, calculate the height of p through element.css initialization in the directive, and update it dynamically p height

2. Directive monitors ($$watch)angular's $digest, obtains the body height in real time, and dynamically assigns model or element.css changes

Option 1: Add directive and element.css adaptive height

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

2.p element add directive

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

3 .Rendering

Original interface: The height of the right area is adaptive content, resulting in a black background color below

After adjustment: The right area Height-adaptive browser

Option 2: $watch monitors the body height and assigns a value to change the height

1. Create a resize directive

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. Add the resize directive to the p element

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement panda tv navigation using jquery css3

How to implement timed hiding dialog boxes in jQuery

Detailed interpretation of the separation and combination of vue-admin and backend (flask)

Setting the background image in Vue

How to use vue less to implement a simple skin change function

How to use angular, react and vue to implement the same interview question component

The above is the detailed content of How to implement page adaptation in angularjs?. For more information, please follow other related articles on the PHP Chinese website!