如何在angularjs中爲mouseover和mouseleave創建自定義指令

我想創建自定義指令而不是ng-mouseover和ng-mouseleave，因爲ng-mouseleave在chrome中無效。如何在angularjs中爲mouseover和mouseleave創建自定義指令

我的要求是當我mouseover，一個彈出窗口應該出現，當我mouseleave，它應該關閉。在少數情況下，關閉功能不會關閉（popover關閉的頻率不一致）。

<div class="eleCalc" ng-mouseover="calcPopOver(i)" id="term{{i.Id}}" ng-mouseleave="hidePopOvers()"> 
        {{calcNumbers(i)}} 
</div>

calcPopOver功能打開彈出式窗口， hidePopOvers（）關閉。

請幫助創建新的指令。

謝謝

來源

2015-10-26 prashanth

您是否搜索過此問題的其他人？我立即發現了這個問題，它能解決你的問題嗎？ http://stackoverflow.com/questions/27687002/ng-mouseover-and-ng-mouseleave-events-not-working-on-chrome –

這個問題可能是別的，因爲這兩個指令通常適用於所有常見的瀏覽器。我會爲此調查casue而不是實現自定義的。 – LordTribual

@BenHeymink感謝您的回覆。我知道這一點，但它看起來像客戶端不想在鉻進行設置。所以我必須爲上述提出新的方法。你可以幫我嗎？ – prashanth

是的，你可以使用像下面的自定義指令來實現你想要的功能。

app.directive('domDirective', function() { 
     return { 
      restrict: 'A', 
      link: function ($scope, element, attrs) { 
       element.on('click', function() { 
        element.html('You clicked me!'); 
       }); 
       element.on('mouseenter', function() { 
        element.css('background-color', 'yellow'); 
       }); 
       element.on('mouseleave', function() { 
        element.css('background-color', 'white'); 
       }); 
      } 
     }; 
    });

工作代碼筆相同如下。

CodePen

有關類似下面的鏈接這次訪問自定義指令的更多細節。

weblogs.asp.net

來源

2015-10-26 12:04:34

感謝您的回答。我想在mouseenter上，我需要調用calcPopover（i）函數。它會創建一個帶有data.and的彈出窗口。在mouseleave上，我需要調用hidepopovers（）來關閉彈出窗口。 – prashanth

在這種情況下，請使用下面的內容。 http://jsfiddle.net/alexsuch/RLQhh/ –

如何在angularjs中爲mouseover和mouseleave創建自定義指令

回答

相關問題