javascript - navigationend - Angular.js: establece la altura del elemento en la carga de la página

router events subscribe angular 4

Question

Soy AngularJS Newbie. Quiero crear una cuadrícula (usando ng-grid ) cuya altura depende de la altura de la ventana, es decir. $(''.gridStyle'').height($(window).height() - 100);

He escrito una directiva:

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

Esto funciona bien cuando redimensiono la ventana del navegador, pero el estilo no se aplica cuando el sitio se carga por primera vez. ¿Dónde puedo poner el código para inicializar la altura?

Answer 1

Combinando la sugerencia de con el fragmento de la pregunta, terminé con este código que se centra en cambiar el tamaño de la cuadrícula después de cargar los datos.

El HTML:

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

La directiva:

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

El controlador:

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'',
        ...
    };
}

Answer 2

Me encontré con su publicación mientras buscaba una solución para el mismo problema para mí. Reuní la siguiente solución usando una directiva basada en una cantidad de publicaciones. Puede probarlo aquí (intente cambiar el tamaño de la ventana del navegador): http://jsfiddle.net/zbjLh/2/

Ver:

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

Controlador:

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

Para su información, originalmente lo tenía trabajando en un controlador ( http://jsfiddle.net/zbjLh/ ), pero en lecturas posteriores descubrí que esto no es un problema desde la perspectiva de Angular, por lo que ahora lo he convertido para usar una directiva.

Es importante destacar que la nota true al final de la función de ''observación'', para comparar la igualdad del objeto getWindowDimensions (eliminar o cambiar a falso si no se usa un objeto).

Answer 3

Mi solución si su ng-grid depende del elemento padre (div, diseño):

directiva

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

muestra 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>

altura-34: 34 es la altura fija de mi div título, puedes arreglar otra altura.

Es una directiva fácil pero funciona bien.

Answer 4

Para evitar controlar cada ciclo de resumen, podemos cambiar la altura del div cuando se cambia la altura de la ventana.

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

Answer 5

Parece que necesita el siguiente complemento: https://github.com/yearofmoo/AngularJS-Scope.onReady

Básicamente, le brinda la funcionalidad para ejecutar su código de directiva después de que se cargue el alcance o los datos, es decir, $ alcance.

Answer 6

Una leve mejora de la excelente respuesta de Bizzard. Admite el desplazamiento de ancho y / o el desplazamiento de altura en el elemento, para determinar cuánto se restará del ancho / alto y evita las dimensiones negativas.

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

directiva:

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

Editar Esta es en realidad una forma tonta de hacerlo en los navegadores modernos. CSS3 tiene cálculo, lo que permite que el cálculo se especifique en CSS, como este:

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

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

Answer 7

$(document).ready(function() {
       scope.$apply(function() {
                applyHeight();
            });
});

Esto también garantiza que todos los scripts se hayan cargado antes de la ejecución de las declaraciones. Si no lo necesitas puedes usarlo.

$(window).load(function() {
       scope.$apply(function() {
                applyHeight();
            });
});

Answer 8

angular.element(document).ready(function () {
    //your logic here
});