在Angular中跟隨鼠標的Popup對話框

我使用的是Angular 1.0.6和jQuery，我需要創建一個提示，它將遵循鼠標（更改位置）。我到目前爲止是顯示/隱藏：在Angular中跟隨鼠標的Popup對話框

<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事件？我想我可以有這樣的事情：

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

但是不知道如何創建這樣的指令。

來源

2014-05-06 jcubic

有已經AngularUI工具提示插件，但它並沒有跟隨鼠標http://angular-ui.github.io/bootstrap/#/tooltip，也，考慮升級到更新的角度（已經在1.3） – SoluableNonagon

@EliteOctagon我無法升級，因爲我不控制平臺。也有人希望升級，但有很多代碼可能不起作用，需要重寫。 – jcubic

@EliteOctagon你的鏈接爲我返回404。 – jcubic

我想出了這個工具，它可以作爲一種服務（它需要$解析）：

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

來源

2014-05-07 10:31:12 jcubic

在Angular中跟隨鼠標的Popup對話框

回答

相關問題