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

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

1 个答案: