javascript - AngularJS 中跟随鼠标弹出对话框

Question

我正在使用 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>

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

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