javascript - descargar - AngularJS: mejor forma de vigilar el cambio de altura

ng-cloak que es

Question

Tengo el viejo problema de navegación de altura variable: una position: fixes navegación en la parte superior y un contenido con margin-top: $naviHeight continuación. La navegación puede cambiar la altura cuando los datos se cargan de forma asíncrona y, por lo tanto, el margen del contenido debe cambiar con ella.

Quiero que esto sea independiente. Así que no hay código donde se cargan los datos, sino solo en los elementos html involucrados / directivas.

Actualmente lo estoy haciendo en AngularJS 1.2.0 con un temporizador como este:

/*
* Get notified when height changes and change margin-top
 */
.directive( ''emHeightTarget'', function(){
    return {
        link: function( scope, elem, attrs ){

            scope.$on( ''heightchange'', function( ev, newHeight ){

                elem.attr( ''style'', ''margin-top: '' + (58+newHeight) + ''px'' );
            } );
        }
    }
})

/*
* Checks this element periodically for height changes
 */
.directive( ''emHeightSource'', [''$timeout'', function( $timeout ) {

    return {
        link: function( scope, elem, attrs ){

            function __check(){

                var h = elem.height();

                if( h != scope.__height ){

                    scope.__height = h;
                    scope.$emit( ''heightchange'', h );
                }
                $timeout( __check, 1000 );
            }
            __check();
        }
    }

} ] )

Esto tiene el inconveniente obvio de usar el temporizador (que me parece feo) y un cierto retraso después de que la navegación cambia de tamaño hasta que se mueve el contenido.

¿Hay una mejor manera de hacer esto?

Answer 1

Escribí otra variante basada en temporizador que puede vincularse al alcance, porque, como Jamie Pate declaró correctamente, el acceso directo DOM dentro del ciclo de resumen no es una muy buena idea.

.directive("sizeWatcher", [''$timeout'', function ($timeout) {
    return {
        scope: {
            sizeWatcherHeight: ''='',
            sizeWatcherWidth: ''='',
        },
        link: function( scope, elem, attrs ){
            function checkSize(){
                scope.sizeWatcherHeight = elem.prop(''offsetHeight'');
                scope.sizeWatcherWidth = elem.prop(''clientWidth'');
                $timeout( checkSize, 1000 );
            }
            checkSize();
        }
    };
}

Ahora puedes vincularlo en cualquier elemento:

<img size-watcher size-watcher-height="myheight">
<div style="height: {{ myheight }}px">

Entonces el div siempre mantiene (con una latencia de un segundo) la misma altura que la imagen.

Answer 2

Este enfoque evita (potencialmente) desencadenar un reflow cada ciclo de digestión. Solo verifica elem.height() / after / el ciclo de resumen ha terminado, y solo causa un nuevo resumen si la altura ha cambiado.

var DEBOUNCE_INTERVAL = 50; //play with this to get a balance of performance/responsiveness
var timer
scope.$watch(function() { timer = timer || $timeout(
    function() {
       timer = null;
       var h = elem.height();
       if (scope.height !== h) {
           scope.$apply(function() { scope.height = h })
       }
    },
    DEBOUNCE_INTERVAL,
    false
)

Answer 3

Este enfoque observa el alto y el ancho de un elemento y lo asigna a una variable en el alcance provisto en su atributo de elementos

 <div el-size="size"></div>


.directive(''elSize'', [''$parse'', function($parse) {
  return function(scope, elem, attrs) {
    var fn = $parse(attrs.elSize);

    scope.$watch(function() {
      return { width: elem.width(), height: elem.height() };
    }, function(size) {
      fn.assign(scope, size);
    }, true);

  }
}])

Answer 4

Esto funciona registrando un observador en emHeightSource que se llama cada $digest . Actualiza la propiedad __height que a su vez se ve en emHeightTarget :

/*
 * Get notified when height changes and change margin-top
 */
.directive( ''emHeightTarget'', function() {
    return {
        link: function( scope, elem, attrs ) {

            scope.$watch( ''__height'', function( newHeight, oldHeight ) {
                elem.attr( ''style'', ''margin-top: '' + (58 + newHeight) + ''px'' );
            } );
        }
    }
} )

/*
 * Checks every $digest for height changes
 */
.directive( ''emHeightSource'', function() {

    return {
        link: function( scope, elem, attrs ) {

            scope.$watch( function() {
                scope.__height = elem.height();
            } );
        }
    }

} )

Answer 5

Puede monitorear el cambio de altura de su elemento sin usar Div, simplemente escribiendo una declaración de $watch :

// Observe the element''s height.
scope.$watch
    (
        function () {
            return linkElement.height();
        },
        function (newValue, oldValue) {
            if (newValue != oldValue) {
                // Do something ...
                console.log(newValue);
            }
        }
    );

Answer 6

Puede ser que tengas que mirar los cambios en las dimensiones de $window , algo así como:

.directive( ''emHeightSource'', [ ''$window'', function(  $window ) {

    return {
        link: function( scope, elem, attrs ){

           var win = angular.element($window);
           win.bind("resize",function(e){

              console.log(" Window resized! ");
              // Your relevant code here...

           })
        }
    }    
} ] )

Answer 7

Usé una combinación de $ watch y resize event. Encontré sin alcance. $ Apply (); en el evento de cambio de tamaño, $ watch no siempre detecta los cambios de altura en el elemento.

   link:function (scope, elem) {
        var win = angular.element($window);
        scope.$watch(function () {
                return elem[0].offsetHeight;
        },
          function (newValue, oldValue) {
              if (newValue !== oldValue)
              {
                  // do some thing
              }
          });

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