Javascript 如何使元素指令相对于ng重复项的位置？

我有一个数组中标记对象的

ng repeat

列表。当您将鼠标悬停在任何标记上时，与该标记相关的

元素将显示其他标记信息

按照我设置标记和代码的方式，

确实显示了悬停的每个标记的正确信息。但是，显示的

位置始终是

ng repeat

列表中的最后一个位置

理想的情况是，悬停的每个标记的

将显示在该标记的正下方，而不总是最后一个标记

---

更新我正在使用保存和存储控制器和指令的作用域，看起来我可能需要一种方法来索引我需要的

tagHover

的作用域

---

<我将鼠标悬停在第一个标签上

标记栏中的我的标记：

<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 is that popover div with tag details -->
        <tags-hover></tags-hover>
    </li>
</ul>

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

.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);
    }
}

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);
};

var saveTagDetails = function(ticker, tag) {

    ApiFactory.getTagData(ticker, tag.term_id).then(function(data) {

        // API code and data calculation stuffs...

        tag.tweet_percentage = increase;
        details.direction    = tag.direction;
        //etc etc ...

        // I get the scope of the tagsHover Directive and then call hoveringTag()
        tagsHover = ScopeFactory.getScope('tagsHover');
        tagsHover.hoveringTag();
    });
};

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 is that popover div with tag details -->
        <tags-hover></tags-hover>
    </li>
</ul>

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

.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);
    }
}

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);
};

var saveTagDetails = function(ticker, tag) {

    ApiFactory.getTagData(ticker, tag.term_id).then(function(data) {

        // API code and data calculation stuffs...

        tag.tweet_percentage = increase;
        details.direction    = tag.direction;
        //etc etc ...

        // I get the scope of the tagsHover Directive and then call hoveringTag()
        tagsHover = ScopeFactory.getScope('tagsHover');
        tagsHover.hoveringTag();
    });
};

中间服务标签详细信息工厂：

<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 is that popover div with tag details -->
        <tags-hover></tags-hover>
    </li>
</ul>

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

.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);
    }
}

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);
};

var saveTagDetails = function(ticker, tag) {

    ApiFactory.getTagData(ticker, tag.term_id).then(function(data) {

        // API code and data calculation stuffs...

        tag.tweet_percentage = increase;
        details.direction    = tag.direction;
        //etc etc ...

        // I get the scope of the tagsHover Directive and then call hoveringTag()
        tagsHover = ScopeFactory.getScope('tagsHover');
        tagsHover.hoveringTag();
    });
};

my tagHover指令中的代码：

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;
    }
};

如何修复显示的是与悬停的标记相关的标记？而不是

ng repeat

中的最后一个

注意：这里是chrome开发工具的HTML截图，即使我将鼠标悬停在其他标记上，标记也会悬停在最后一个

li

中。如果获得所有更新，我只会看到最后一个

tweets

中的计数变化：

---

如注释中所示，只有一个

可见的最可能原因是ScopeFactory

我的解决方案是在模型中是否可见

时保留决策，并避免访问其他元素的作用域

代码示例：

对应的html：

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

{{t.name}}

showDetails

不必用false初始化：如果属性不存在，它将简单地计算为false

唯一的缺点是您需要将此属性添加到模型数据中，它最终可能会覆盖其他内容。

---

在这种情况下，您需要将模型包装到另一个对象中。

它看起来更像css问题，而不是角度问题。是否可以添加与列表和标记悬停容器相关的css？是否使用

ScopeFactory.getScope（'tagsHover'）

访问当前悬停的

的范围？我不知道您的ScopeFactory是如何工作的，但是在标记悬停指令中，您调用

ScopeFactory.saveScope（'tagsHover'，vs）因此，如果ScopeFactory是一个键值存储，则只保存最后一个作用域（覆盖具有相同键的所有其他作用域）。您在代码中非常频繁地使用
ScopeFactory.getScope（'tagsHover'）
，大概是为了获取
tagsHover
指令的
$scope
对象。但是，每次初始化指令时，它都会通过
ScopeFactory.saveScope（'tagsHover'，vs.）覆盖上一个值。实际上，您需要找到一种方法来索引数组中的每个作用域。@mrak比我快了大约30秒，但我们在这里说的基本上是一样的。我想我同意
ScopeFactory
往往只是全球垃圾场的另一种形式；它实际上并不比在
$rootScope
之间传递变量更好。正确的方法是指令具有隔离作用域并提供参数。您还需要以类似的方式实现
hideTagDetails
，以隐藏
ng mouseleave
上的popover。非常感谢！我应该能够通过
t
通过各种控制器、服务和最终指令来实现这一点…@Claies你是对的。另一种方法是迭代
showTagDetails
中的标记，并重置
showtateils=false
此外，在不使用隔离作用域的情况下，如果您碰巧在页面上同时出现多个标记悬停，则它们都将是相同的，即生成的最后一个模板。但是使用隔离作用域会使定义复杂化，如果不可能显示多个标记悬停元素，则可能没有必要使用隔离作用域。好吧，很好，我将不得不重构很多东西，以这种方式工作：D和我都很自豪地提出了
scopeFactory
lol。。。