下面的鼠标角弹出的对话框 [英] Popup dialog that follow the mouse in Angular

问题描述

我使用的角度1.0.6和jQuery，我需要创建将跟随鼠​​标（改变位置）的提示。我至今是显示/隐藏：

I'm using Angular 1.0.6 and jQuery and I need to create a hint that will follow the mouse (change position). What I have so far is the show/hide:

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

我应该如何改变弹出的x和y位置取决于mousemove事件？我在想，我能有这样的事情：

How should I change x and y position of the popup depend on mousemove event? I was thinking that I could have something like this:

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

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

But don't know how to create directive like this.

推荐答案

我这个实用工具，它可以作为一个服务想出了（它需要$解析）：

I came up with this utility that can be used as a service (it require $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]);
                        }
                    }
                }
            }
        }
    }
}

此功能会分析来自对象（字符串）为范围值，返回的对象值将允许基于其他对象来更改这些值。它可以在指令中使用这样的：

This function will parse values from object (string) as scope values, and returned object will allow to change those values based on other object. It can be used in directive like this:

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

这篇关于下面的鼠标角弹出的对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！