gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 01:18:41 25 4
gpt4 key购买 nike

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

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

最佳答案

我想出了这个可以用作服务的实用程序(它需要 $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
});
});
});
}
};

关于javascript - AngularJS 中跟随鼠标弹出对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23500398/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com