Получение позиции x и y каждого li 'в списке с помощью Angular

Question

Мне нужно перечислить с некоторыми пользователями в нем. Теперь через угловой я пытаюсь получить позицию (x и y) каждого пользователя в списке. Не знаю, как начать, любая помощь приветствуется

Если я печатаю это прямо в консоль я получаю позицию моего Ли:

$(".circular").each(function(){ 
        console.log(this.offsetTop); 
       }); 

Но когда я делаю это с помощью функции в моем app.js я ничего не получаю ->http://gyazo.com/32a17fec94625aadc52d2a61a9d7c966

Чтобы получить визуальное, проверить мой код перо ->http://codepen.io/GY22/pen/bdKxee

HTML код:

<!-- START SIDEBAR --> 
<div id="sidebar" ng-app="DragDrop" ng-controller="AppCtrl"> 
    <ul> 
    <li ng-repeat="user in users" class="circular"> 
     <p class="initials">{{user.initials}}</p> 
    </li> 
    </ul> 
</div> 
<!-- END SIDEBAR --> 

CSS:

#sidebar { 
    position: fixed; 
    width: 120px; 
    height: 100%; 
    background-color: #f00; 
    z-index: 33; 
    margin-top: 0px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    margin-bottom: 100px 
} 

#userList { 
    padding-bottom: 10px !important; 
} 

ul li { 
    margin-left: -22px; 
    list-style-type: none; 
} 

.circle { 
    border-radius: 50%; 
    width: 25px; 
    height: 25px; 
    background-color: hotpink; 
} 

.initials { 
    margin-left: 25px; 
    padding-top: 30px; 
    font-weight: bold; 
    font-size: 18px; 
} 

app.js:

var contentEditor = angular.module("DragDrop", []); 

contentEditor.controller('AppCtrl', function($scope) { 

    $scope.users = [{ 
    initials: 'GY' 
    }, { 
    initials: 'XX' 
    }, { 
    initials: 'KK' 
    }, { 
    initials: 'TT' 
    }, { 
    initials: 'AA' 
    }, { 
    initials: 'QQ' 
    }, { 
    initials: 'PP' 
    }, { 
    initials: 'SS' 
    }, { 
    initials: 'MM' 
    }, { 
    initials: 'RS' 
    }, { 
    initials: 'KL' 
    }, { 
    initials: 'CJ' 
    }, { 
    initials: 'RT' 
    }, { 
    initials: 'DJ' 
    }, { 
    initials: 'XG' 
    }, { 
    initials: 'XX' 
    }]; 

}); 

Answer 1

Используйте эту директиву

contentEditor.directive('custom', function() { 
return { 
    restrict: 'E', 
    link: function(scope, element, attrs) { 
     console.log(element); 
     element.append("<p>y: "+element[0].offsetTop+" x: "+element[0].offsetLeft+"</p>"); 
    } 
} 
}); 

ваш р тег будет

<p class="initials" ><custom></custom>{{user.initials}}</p> 

работает ре п http://codepen.io/anon/pen/doKqrP

ручка, которая проверить смещение http://codepen.io/anon/pen/WvyaLL