在 AngularJS 中跟随鼠标的弹出对话框答案

【问题标题】：Popup dialog that follow the mouse in AngularJS在 AngularJS 中跟随鼠标的弹出对话框
【发布时间】：2014-06-23 09:40:38
【问题描述】：

我正在使用 Angular 1.0.6 和 jQuery，我需要创建一个跟随鼠标的提示（更改位置）。到目前为止我所拥有的是显示/隐藏：

<div ng-repeat="item in items">
    <span ng-mouseover="item.show_description=true" ng-mouseleave="item.show_description=false">
       {{item.text}}
    </span>
    <div class="description-popup" ng-show="item.description && item.show_description">
       {{item.description}}
    </div>
</div>

我应该如何根据mousemove 事件更改弹出窗口的 x 和 y 位置？我在想我可以有这样的东西：

<div pointer="{x: item.x, y: item.y}">Hello</div>
<div class="popup" style="left: {{item.x}}; top: {{item: y}}">
  Popup
</div>

但不知道如何创建这样的指令。

【问题讨论】：

AngularUI中已经有一个tooltip插件，但是它不跟随鼠标angular-ui.github.io/bootstrap/#/tooltip，另外，考虑升级到更新的angular（已经在1.3）
@EliteOctagon 我无法升级，因为我无法控制平台。也有人确实想升级，但有很多代码可能无法正常工作，需要重写。
@EliteOctagon 你的链接为我返回 404。
对不起，试试angular-ui.github.io/bootstrap，见工具提示

标签： javascript jquery angularjs mouseevent jquery-events

【解决方案1】：

我想出了这个可以用作服务的实用程序（它需要 $parse）：

function objectParser(expr) {
    var strip = expr.replace(/\s*\{\s*|\s*\}\s*/g, '');
    var pairs = strip.split(/\s*,\s*/);
    if (pairs.length) {
        var getters = {};
        var tmp;
        for (var i=pairs.length; i--;) {
            tmp = pairs[i].split(/\s*:\s*/);
            if (tmp.length != 2) {
                throw new Error(expr + " is Invalid Object");
            }
            getters[tmp[0]] = $parse(tmp[1]);
        }
        return {
            assign: function(context, object) {
                for (var key in object) {
                    if (object.hasOwnProperty(key)) {
                        if (getters[key]) {
                            getters[key].assign(context, object[key]);
                        }
                    }
                }
            }
        }
    }
}

此函数将对象（字符串）中的值解析为范围值，返回的对象将允许根据其他对象更改这些值。它可以在这样的指令中使用：

{
    restrict: 'A',
    link: function(scope, element, attrs) {
        var expr = objectParser(attrs.pointer);
        element.mousemove(function(e) {
            var offest = element.offset();
            scope.$apply(function() {
                expr.assign(scope, {
                    x: e.pageX - offest.left,
                    y: e.pageY - offest.top
                });
            });
        });
    }
};

【讨论】：