javascript - How to make the position of an element Directive relative to an ng-repeated item? -

i have ng-repeat list of tag objects array. when hover on tag, <tags-hover> element related tag displays additional tag information.

with way have markup , code setup, <tags-hover> display correct information each tag hovered. however, position of <tags-hover> shows last 1 in ng-repeat list.

the ideal situation <tags-hover> each tag hovered, appear directly below tag, , not last one.

---

update i'm using scopefactory save , store scopes controllers , directives, looks may need way index scope of taghover need.

---

< i'm hovering on first tag here.

my markup in tagspanel:

<ul>     <li ng-repeat="(k, m) in tags | filter:filtertags | orderby:predicate:reverse"         ng-class="{'selected': m.selected}"         ng-mouseover="hovertag(m)"         ng-mouseleave="leavetag()"         ng-click="selecttag(m)" class="tag-li" style="transition-delay: {{$index * 60}}ms">          <div class="tag"              ng-class="{'positive': m.direction == 'positive',                         'negative': m.direction == 'negative',                         ''        : m.direction == 'stagnant'}">                         {{m.term}}          </div>          <!-- below popover div tag details -->         <tags-hover></tags-hover>     </li> </ul> 

tagshover html markup:

<div class="tags-hover-container" ng-show="tagshoverdisplay">     ... 

tagshover styling:

.tags-hover-container {     float: left;     position: relative;     width: 250px;     height: auto;     background: $gray_bg;     border: 1px solid $gray2;     z-index: 10000;     @include rounded(3px);     @include clearfix;      &:before {         position: absolute;         top: -10px;         left: 26px;         z-index: 9999;         @include triangle(up, 10px, $gray_bg);     }      &:after {         position: absolute;         top: -11px;         left: 25px;         z-index: 9998;         @include triangle(up, 11px, $gray2);     } } 

tagspanel controller:

vs.hovertag = function(tagobj) {     tagshover = scopefactory.getscope('tagshover');     tagshover.breaktimeout = true;     tagdetailsfactory.savetagdetails(vs.ticker, tagobj); };  vs.leavetag = function() {     tagshover.breaktimeout = false;     tagshover = scopefactory.getscope('tagshover');     $timeout(tagshover.leavingtag, 500); }; 

the inbetween service tagsdetailsfactory:

var savetagdetails = function(ticker, tag) {      apifactory.gettagdata(ticker, tag.term_id).then(function(data) {          // api code , data calculation stuffs...          tag.tweet_percentage = increase;         details.direction    = tag.direction;         //etc etc ...          // scope of tagshover directive , call hoveringtag()         tagshover = scopefactory.getscope('tagshover');         tagshover.hoveringtag();     }); }; 

the code in taghover directive:

var vs                  = $scope;     vs.breaktimeout     = false,     vs.tagdetails       = {},     vs.tagshoverdisplay = false;     scopefactory.savescope('tagshover', vs);  vs.hoveringtag = function() {     vs.tagdetails       = {};     vs.tagdetails       = tagdetailsfactory.gettagdetails();     vs.tagshoverdisplay = true; };  vs.leavingtag = function() {     if (vs.breaktimeout) {} else {         vs.tagshoverdisplay = false;     } }; 

how approaching fixing displays 1 relative tag hovered? , not last 1 in ng-repeat?

note here screenshot of html chrome dev tools, when hover on other tags, tags-hover in last li gets updating, see tweets count change in last one:

as shown in comments, reason 1 <tags-hover> visible scopefactory.

my solution keep decision if <tags-hover> visible in model , avoid accessing scopes of other elements.

code example: http://plnkr.co/edit/ahuh1ax7hmyafzacznpi?p=preview

.directive('tagdetails', function() {     return {     restrict: "e",     link: function($scope, el, attrs) {       console.debug($scope, attrs);     },     scope:{         tag:'=ngmodel'     },     template: '<div ng-show="tag.showdetails">{{tag.details}}</div>'   }; }) 

i implemented directive in way, visibility depends on showdetails property belongs model.

now need change property, e.x. in controller

$scope.showtagdetails = function(t) {   t.showdetails = true; } 

corresponding html:

<li ng-repeat="t in tags">   <div ng-mouseover="showtagdetails(t)">{{t.name}}</div>   <tag-details ng-model="t"></tag-details> </li> 

the showdetails doesn't have initialized false: evaluate false if property not there.

the disadvantage need add property model data , overwrite else. case need wrap model in object.