web-dev-qa-db-fra.com

Angular.js: définit la hauteur de l'élément au chargement de la page

Je suis novice AngularJS. Je veux créer une grille (en utilisant ng-grid ) dont la hauteur dépend de la hauteur de la fenêtre, par exemple. $('.gridStyle').height($(window).height() - 100);

J'ai écrit une directive:

app.directive('resize', function($window) {

    return function(scope, element) {

        function applyHeight() {
            scope.height = $window.innerHeight;
            $('.gridStyle').height(scope.height - 100);
        }

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

        applyHeight();
    };
});

Cela fonctionne bien lorsque je redimensionne la fenêtre du navigateur, mais le style n'est pas appliqué lorsque le site est chargé pour la première fois. Où puis-je mettre du code pour augmenter la taille?

javascriptangularjs
43
kolar

Je suis tombé sur votre message car je cherchais une solution au même problème. J'ai mis en place la solution suivante en utilisant une directive basée sur un certain nombre de posts. Vous pouvez l'essayer ici (essayez de redimensionner la fenêtre du navigateur): http://jsfiddle.net/zbjLh/2/

Vue:

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

Manette:

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

FYI je l'avais à l'origine travailler dans un contrôleur ( http://jsfiddle.net/zbjLh/ ), mais à la lecture ultérieure a constaté que ce n'est pas cool du point de vue Angular, donc je l'ai converti à l'aide d'une directive.

Notez que l'indicateur true à la fin de la fonction 'watch' permet de comparer l'égalité de l'objet getWindowDimensions (supprimez ou modifiez la valeur false si vous n'utilisez pas d'objet).

81
Matty J

Pour éviter de vérifier chaque cycle de résumé, nous pouvons modifier la hauteur de la div lorsque la hauteur de la fenêtre est modifiée.

http://jsfiddle.net/zbjLh/709/

<div ng-app="miniapp" resize>
  Testing
</div>

.

var app = angular.module('miniapp', []);

app.directive('resize', function ($window) {
    return function (scope, element) {
        var w = angular.element($window);
        var changeHeight = function() {element.css('height', (w.height() -20) + 'px' );};  
            w.bind('resize', function () {        
              changeHeight();   // when window size gets changed             
        });  
        changeHeight(); // when page loads          
    }
})
9
Razan Paul
angular.element(document).ready(function () {
    //your logic here
});
5
Engineer

Une légère amélioration par rapport à l'excellente réponse de Bizzard. Prend en charge le décalage en largeur et/ou en hauteur sur l'élément, afin de déterminer le montant soustrait de la largeur/hauteur et d'éviter les cotes négatives.

 <div resize height-offset="260" width-offset="100">

directif:

app.directive('resize', ['$window', function ($window) {
    return function (scope, element) {
        var w = angular.element($window);
        var heightOffset = parseInt(element.attr('height-offset'));
        var widthOffset = parseInt(element.attr('width-offset'));
        var changeHeight = function () {
            if (!isNaN(heightOffset) && w.height() - heightOffset > 0)
                element.css('height', (w.height() - heightOffset) + 'px');
            if (!isNaN(widthOffset) && w.width() - widthOffset > 0)
                element.css('width', (w.width() - widthOffset) + 'px');
        };
        w.bind('resize', function () {
            changeHeight();
        });
        changeHeight();
    }
}]);

Edit C’est en fait une façon idiote de le faire dans les navigateurs modernes. CSS3 a calc, ce qui permet de spécifier le calcul en CSS, comme ceci:

#myDiv {
 width: calc(100% - 200px);
 height: calc(100% - 120px);
}

http://caniuse.com/#search=calc

1
Tony BenBrahim

Ma solution si votre ng-grid dépend de l'élément parent (div, layout):

directif 

myapp.directive('sizeelement', function ($window) {
return{
    scope:true,
    priority: 0,
    link: function (scope, element) {
        scope.$watch(function(){return $(element).height(); }, function(newValue, oldValue) {
            scope.height=$(element).height();
        });
    }}
})

échantillon html

<div class="portlet  box grey" style="height: 100%" sizeelement>
    <div class="portlet-title">
        <h4><i class="icon-list"></i>Articles</h4>
    </div>
    <div class="portlet-body" style="height:{{height-34}}px">
        <div class="gridStyle" ng-grid="gridOrderLine" ="min-height: 250px;"></div>
    </div>
</div>

height-34: 34 est la hauteur fixe de mon titre div, vous pouvez corriger une autre hauteur.

C'est une directive facile mais cela fonctionne bien.

0
timactive

Il semble que vous ayez besoin du plugin suivant: https://github.com/yearofmoo/AngularJS-Scope.onReady

En gros, il vous donne la possibilité d’exécuter votre code de directive après le chargement de votre portée ou de vos données, c’est-à-dire $ scope. $ WhenReady

0
Hardik Varia

En combinant la suggestion matty-j avec l'extrait de code de la question, je me suis retrouvé avec ce code qui visait à redimensionner la grille après le chargement des données.

Le HTML:

<div ng-grid="gridOptions" class="gridStyle"></div>

La directive:

angular.module('myApp.directives', [])
    .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) {

                // resize Grid to optimize height
                $('.gridStyle').height(newValue.h - 250);
            }, true);

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

Le controlle:

angular.module('myApp').controller('Admin/SurveyCtrl', function ($scope, $routeParams, $location, $window, $timeout, Survey) {

    // Retrieve data from the server
    $scope.surveys = Survey.query(function(data) {

        // Trigger resize event informing elements to resize according to the height of the window.
        $timeout(function () {
            angular.element($window).resize();
        }, 0)
    });

    // Configure ng-grid.
    $scope.gridOptions = {
        data: 'surveys',
        ...
    };
}
0
Fabien