Anglejs에서 페이지 적응을 구현하는 방법은 무엇입니까?

이 글에서는 주로 Anglejs 페이지의 적응형 높이 방법을 소개하고 참고하겠습니다.

Requirements

Angularjs로 구축된 비즈니스 시스템에서는 페이지 점프가 ui-view 라우팅을 통해 구현됩니다. 시스템을 초기화하고 진입한 후 오른쪽의 콘텐츠 영역이 브라우저 높이에 맞춰져야 합니다.

구현 계획

1. ui-view가 위치한 p에 디렉티브를 추가하고, 디렉티브에서 element.css 초기화를 통해 p의 높이를 계산하고, p

2. 디렉티브의 높이를 동적으로 업데이트합니다. $$watch) 각도 다이제스트 모니터링, 실시간으로 본체 높이 가져오기, 모델 또는 element.css 변경 사항을 동적으로 할당

옵션 1: 지시문 및 element.css 적응 높이 추가

1.

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 요소 추가 지시어

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

3. 효과 그림

원래 인터페이스: 오른쪽 영역의 높이는 적응형 콘텐츠이므로 아래 배경색은 검정색이 됩니다

조정 후: 영역의 높이 오른쪽 영역은 브라우저에 적응됩니다

해결 방법 2: $watch는 몸체의 높이를 모니터링하고 높이를 변경하는 값을 할당합니다

1 크기 조정 지시어를 만듭니다

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.

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

p 요소에 대한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

jquery+css3을 사용하여 Panda TV 탐색을 구현하는 방법

jQuery에서 시간 지정 숨기기 대화 상자를 구현하는 방법

vue-admin과 백엔드(flask)의 분리 및 조합에 대한 자세한 해석 )

Vue에서 배경 이미지 설정

vue + less를 사용해 간단한 스킨 변경 기능을 구현하는 방법

Angular, React, Vue를 사용해 동일한 면접 질문 컴포넌트를 구현하는 방법

위 내용은 Anglejs에서 페이지 적응을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!