집 >웹 프론트엔드 >JS 튜토리얼 >Anglejs에서 페이지 적응을 구현하는 방법은 무엇입니까?

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

亚连원래의: 2018-06-11 16:18:372572검색

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

Requirements

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

구현 계획

ui-view가 위치한 p에 디렉티브를 추가하고, 디렉티브에서 element.css 초기화를 통해 p의 높이를 계산하고, p
디렉티브의 높이를 동적으로 업데이트합니다. $$watch) 각도 다이제스트 모니터링, 실시간으로 본체 높이 가져오기, 모델 또는 element.css 변경 사항을 동적으로 할당

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

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

2.p 요소 추가 지시어

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

3. 효과 그림

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

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

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

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

var app = angular.module(&#39;miniapp&#39;, []);

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

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

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

    }, true);

    w.bind(&#39;resize&#39;, function () {
      scope.$apply();
    });
  }
})

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

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

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

관련 기사