web-dev-qa-db-ja.com

ウィンドウサイズ変更ディレクティブ

ウィンドウのサイズが変更されたときにdivのサイズを変更しようとしていましたが、見回した後、ディレクティブを使用することが最良の解決策であるようです。

テンプレート：

<div elHeightResize ng-view ng-style="{ height: windowHeight }"></div>

指令：

myApp.directive('elheightresize', ['$window', function($window) {
    return {
        link: function(scope, elem, attrs) {
            scope.onResize = function() {
                var header = document.getElementsByTagName('header')[0];
                elem.windowHeight = $window.innerHeight - header.clientHeight;
            }
            scope.onResize();

            angular.element($window).bind('resize', function() {
                scope.onResize();
            })
        }
    }
}])

elem.windowHeightでscope.onResizeにログインできますが、ngStyleに適用されないようです

私はまだ何かを見落としていますか？

編集：

<div ng-view resize style="height: {{ windowHeight }}px">

このソリューションは機能しているようですが、ngStyleを使用しても機能しなかった理由に興味があります。

angularjsresizewindow
38
woutr_be

scope.onResizeメソッドの最後でscope.$apply();を呼び出してダイジェストサイクルを開始するのを忘れたと思います

とにかく、私は次のディレクティブを使用しました HERE）それは私のために働く：

デバッグビューを開いてビューの高さを変更してみてください：デモ Fiddle

app.directive('resize', function ($window) {
    return function (scope, element, attr) {

        var w = angular.element($window);
        scope.$watch(function () {
            return {
                'h': w.height(), 
                'w': w.width()
            };
        }, function (newValue, oldValue) {
            scope.windowHeight = newValue.h;
            scope.windowWidth = newValue.w;

            scope.resizeWithOffset = function (offsetH) {

                scope.$eval(attr.notifier);

                return { 
                    'height': (newValue.h - offsetH) + 'px'
                    //,'width': (newValue.w - 100) + 'px' 
                };
            };

        }, true);

        w.bind('resize', function () {
            scope.$apply();
        });
    }
});

そして使用法：

 <div  ng-style="resizeWithOffset(165)" 
       resize 
        notifier="notifyServiceOnChage(params)"
   >
    /** ... */
 </div>

ダミーコントローラーメソッドの使用法：

$scope.notifyServiceOnChage = function(){
      console.log($scope.windowHeight);   
 };

[編集]

innerHeightを使用したjQueryライブラリなしのデモを以下に示します

デモ3Fiddle

47
Maxim Shoustin

ディレクティブを使用するため、ディレクティブ内の要素の高さを変更することで、いつでもDOM操作を行うことができます。

例：

var app=angular.module('App', []);
app.directive('elheightresize', ['$window', function($window) {
    return {
        link: function(scope, elem, attrs) {
            scope.onResize = function() {
                var header = document.getElementsByTagName('header')[0];
                elem.windowHeight = $window.innerHeight - header.clientHeight;
                $(elem).height(elem.windowHeight);
            }
            scope.onResize();

            angular.element($window).bind('resize', function() {
                scope.onResize();
            })
        }
    }
}])

ライブの例： http://jsfiddle.net/choroshin/FJvyb/

7
Alex Choroshin

あなたが尋ねてからしばらく経ち、あなたはあなたの回避策を手に入れたようですが...あなたはまたng-styleがうまくいかなかった理由を尋ねます：

Angularドキュメントからのngスタイル

キーがCSSスタイル名であり、値がそれらのCSSキーに対応する値であるオブジェクトに評価される式。

したがって、ngスタイルの例では、height : 375;（windowHeightが375に評価された場合）を提供していますが、これは適切な値ではありません。

回避策を実行し、ユニットを持っているようにしてください。

windowHeight =（$ window.innerHeight-header.clientHeight）+ "px";

5
user2667100

内部リンク機能

scope.onResize = function() {
            var header = document.getElementsByTagName('header')[0];
            elem.windowHeight = $window.innerHeight - header.clientHeight;
        }


$window.onresize = function(){scope.onResize();scope.$apply();}
3
Aswin Ramesh

CoffeeScriptのミニマリスト：

app.directive "applyOnResize", ($window) ->
  ($scope, $element) ->
    $element($window).bind("resize", $scope.$apply)

Javascriptと同じ 。

3
Dorian

angular $ watchを使用せずに、ウィンドウサイズの変更を確認したい別のバージョンを次に示します。

function resize () {

        var windowHeight = window.innerHeight,
            windowWidth  = window.innerWidth;

        scope.windowHeight = windowHeight;
        scope.windowWidth  = windowWidth;

        console.log('w.innerHeight', windowHeight);
        console.log('w.innerWidth', windowWidth);

        //** If want to apply style on element, can do something like:
        var elemStyle = {
            width: windowWidth + 'px',
            height: windowHeight + 'px'
        };

        element.css(elemStyle);
    }       
    resize();

    //** On resize
    window.onresize = function () {
        resize();
        scope.$apply();
    }

    //** Destroy
    scope.$on('$destory', function () {
        window.off('resize')
    });

フィドル

0
Neaped