angularjs中如何实现页面自适应?

亚连
Lepaskan: 2018-06-11 16:18:37
asal
2526 orang telah melayarinya

本篇文章主要介绍了angularjs 页面自适应高度的方法,现在分享给大家,也给大家做个参考。

需求

在angularjs构建的业务系统中,通过ui-view路由实现页面跳转,初始化进入系统后,右侧内容区域需要自适应浏览器高度。

实现方案

  1. 在ui-view所在的p添加directive,directive中通过element.css初始化计算p的高度,动态更新p高度

  2. directive监听($$watch)angular的$digest,实时获取body高度,动态赋值model或element.css改变

方案1:添加directive和element.css自适应高度

1.创建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;
});
Salin selepas log masuk

2.p元素添加directive

<p ui-view auto-height></p>
Salin selepas log masuk

3.效果图

原界面:右侧区域的高度为自适应内容,导致下方存在黑色的背景色

调整后:右侧区域的高度自适应浏览器

方案2:$watch监听body高度,赋值改变高度

1.创建resize directive

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();
    });
  }
})
Salin selepas log masuk

2.在p元素上增加resize directive

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

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

使用jquery+css3如何实现熊猫tv导航

在jQuery中如何实现定时隐藏对话框

详细解读vue-admin和后端(flask)分离结合

在Vue中设置背景图片

使用vue + less如何实现简单换肤功能

使用angular、react和vue如何实现相同的面试题组件

Atas ialah kandungan terperinci angularjs中如何实现页面自适应?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan