AngularJS – Cómo conseguir el desplazamiento de la parte superior y a la izquierda de la posición de un elemento en el documento

buscando gurú de la ayuda,
Estoy usando angularJS en la repetición de una lista en el código de abajo. ¿Cómo puedo obtener el absoulute posición o en relación al documento de la parte superior y a la izquierda desplazamiento a la posición para ‘div class=»section»‘ y la imprime en la consola?
Es posible que con AngularJs o tengo que usar Jquery?

Finalmente mi objetivo es conseguir que el desplazamiento de las posiciones y el uso de la posición de una ventana modal, pero si yo pudiera obtener ayuda sobre el de arriba yo debería ser capaz de entender el resto.

Mi código es el siguiente y gracias de antemano:

HTML

<body ng-controller="MyMgtCtrl">
    <div class="container-fluid" >
        <div class="section">{{gapSection.headerID}}.{{gapSection.sectionID}}</div>
        <label ng-click="showMenu()" class="label label-primary">Toggle</label>
    </div><!-- /.container -->
</body>

Angular Controlador De

var myMgtApp = angular.module("myMgtApp");

myMgtApp.controller("MyMgtCtrl",function($scope){
    var data={
        showMenu:false,
        gapSection:[{headerID:1,sectionID:1,requirement:"SOME DATA 1"},
        {headerID:2,sectionID:1,requirement:"SOME DATA"},
        {headerID:2,sectionID:2,requirement:"SOME DATA 3"}]
    };

    $scope.data = data;
    $scope.gapSection = data.gapSection;
    $scope.showMenu=function($scope){
        data.showMenu=!data.showMenu;
    };
});
InformationsquelleAutor Ka Tech | 2015-01-27

2 Kommentare

  1. 5

    Dentro de ng-click, se obtiene un $event objeto que puede pasar a su método.

    <label ng-click="showMenu($event)" class="label label-primary">Toggle</label>

    El evento tiene dos propiedades pageX y pageY, que puede ser lo que usted desea.

    $scope.showMenu=function(passedEventObject){
        var x = passedEventObject.pageX;
        var y = passedEventObject.pageY;
        data.showMenu=!data.showMenu;
    };

    Comprobar los «Argumentos» de la sección de la ng-haga clic endocumentación.

    A continuación, haga clic a través de el $evento de la página, que dice

    El objeto es una instancia de una jQuery Objeto de Evento cuando jQuery está presente o similar jqLite objeto. Una vez que usted consiga esto, Angular papel es más y es un jQuery /DOM pregunta.

    (resaltado mío)

    La jQuery Objeto de Evento muestra las dos propiedades.

    Actualización:

    Esto le dará X e y del ratón, lo cual es bastante relevante para el caso de uso de modal posicionamiento en haga clic en como, sin embargo, para ser más exactos, se puede probar con otras cosas:

    var position = $event.target.getBoundingClientRect();
    var x = position.left;
    var y = position.top;
    • Gracias por la respuesta. Sin embargo, mirando a través de los detalles creo pageX y pageY es sólo para la posición del cursor del ratón. Es posible obtener la posición de un elemento en particular por ejemplo, la div class=»section» en mi código?
    • Eso es correcto. Usted puede comprobar si $event ha target como nativo elemento de DOM, si es así, la actualización a la respuesta podría trabajar (si jqLite elemento, sólo tiene que añadir [0] para obtener el objeto DOM).
    • Fantástico! Muchas gracias, esto funciona muy bien para la exacta posición de la etiqueta, y lo mejor de todo es muy limpio. Una pregunta adicional para elaborar todo esto, es posible tranverse a los padres o al elemento anterior de la $evento? He intentado utilizar .padre() y .prev() pero tengo un error
    • Una vez que usted consiga el objetivo, es un elemento de DOM. Usted puede utilizar nativo de las propiedades DOM o envuélvalo Angular del elemento (jqLite elemento) como angular.element($event.target). Más probable es que las propiedades DOM, como parentNode etc será todo lo que usted desea.
  2. 1
    var position = $event.target.getBoundingClientRect();

    var x = posición.a la izquierda;
    var y = posición.la parte superior;

    $scope.showMenu = function(passedEventObject){
        var position = passedEventObject.target.getBoundingClientRect();
        var passedEventObjectx = position.left;
        var passedEventObjecty = position.top;
        console.log(passedEventObjectx+"=="+passedEventObjecty);
    };

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...