javascript - 使用 Angular 获取列表中每个 li' 的 x 和 y 位置

Question

我必须列出其中的一些用户。现在通过 Angular 我试图获得列表中每个用户的位置(x 和 y)。不确定如何开始，欢迎任何帮助

如果我直接在控制台中输入这个，我会得到我的 li 的位置:

$(".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;
}

应用程序.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 标签将是

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

工作笔http://codepen.io/anon/pen/doKqrP

测试偏移量的笔http://codepen.io/anon/pen/WvyaLL