angularjsでページアダプテーションを実装するにはどうすればよいですか?

この記事では主にangularjsページの高さを調整する方法を紹介し、参考にさせていただきます。

要件

angularjs で構築されたビジネス システムでは、初期化してシステムに入った後、ページ ジャンプがブラウザの高さに適応する必要があります。

実装計画

1. ui-viewが配置されているpにディレクティブを追加し、ディレクティブ内でのelement.cssの初期化によりpの高さを計算し、pの高さを動的に更新する

2. ディレクティブ監視($$watch) ) angular の $ ダイジェスト、リアルタイムでボディの高さを取得し、モデルまたは 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を使ってパンダTVナビゲーションを実装する方法

jQueryで時限非表示ダイアログボックスを実装する方法

vue-adminとバックエンド(flask)の分離と組み合わせの詳細な解釈)

Vueで背景画像を設定する

vue+lessを使った簡単なスキン変更機能の実装方法

angular、react、vueを使って同じインタビュー質問コンポーネントを実装する方法

以上がangularjsでページアダプテーションを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。