web-dev-qa-db-fra.com

Directive de redimensionnement de la fenêtre

J'essayais de redimensionner une div lorsque la fenêtre était redimensionnée. Après avoir regardé autour de nous, il semblait que l'utilisation d'une directive était la meilleure solution.

Modèle:

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

Directif:

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();
            })
        }
    }
}])

Bien que je puisse me connecter elem.windowHeight dans scope.onResize, il ne semble pas l'appliquer à ngStyle

Suis-je encore en train de négliger quelque chose?

MODIFIER:

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

Cette solution semble fonctionner, toujours intéressée à savoir pourquoi l'utilisation de ngStyle ne fonctionnait pas.

angularjsresizewindow
38
woutr_be

Je pense que vous avez oublié d'activer le cycle de résumé en appelant scope.$apply(); à la fin de scope.onResize méthode

En tout cas, j’ai utilisé la directive suivante (extraite de HERE) ça marche pour moi:

Essayez d'ouvrir la vue de débogage et de modifier la hauteur de la vue: Démo 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();
        });
    }
});

Et utilisation:

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

Utilisation de la méthode du contrôleur factice:

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

[EDIT]

Voici une démo sans bibliothèque jQuery en utilisant innerHeight

Démo 3Fiddle

47
Maxim Shoustin

Puisque nous travaillons avec une directive, nous pouvons toujours effectuer certaines manipulations du DOM en modifiant la hauteur de l'élément dans la directive.

Exemple:

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();
            })
        }
    }
}])

Exemple en direct: http://jsfiddle.net/choroshin/FJvyb/

7
Alex Choroshin

Cela fait longtemps que vous avez demandé et vous semblez avoir obtenu votre solution de contournement ... mais vous demandez également pourquoi ng-style n'a pas fonctionné:

ng-style, à partir du Angular docs

Expression qui correspond à un objet dont les clés sont des noms de style CSS et les valeurs correspondent aux valeurs correspondantes pour ces clés CSS.

Donc, dans votre exemple de style ng, vous fournissez height : 375; (c'est-à-dire si windowHeight est évalué à 375) et ce n'est pas une valeur appropriée.

Cela devrait être comme vous l'avez fait dans votre solution de contournement et avoir des unités.

windowHeight = ($ window.innerHeight - header.clientHeight) + "px";

5
user2667100

Fonction de lien interne donne

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

Un minimaliste dans CoffeeScript:

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

idem en Javascript .

3
Dorian

Voici une autre version sans utiliser angular $ watch et je veux juste regarder le changement de taille de la fenêtre:

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')
    });

violon

0
Neaped