Question

我正在尝试在AngularJS中使用简单的工具提示。

这是我的HTML：

<span class="afterme" ng-mouseover="showToolTip('this is something', $event)" ng-mouseleave="hideToolTip();">
   <i class="glyphicon glyphicon-exclamation-sign" ></i>
</span>

hrere是JS：

$scope.showToolTip = function(text,$event){
            console.log($event);
            console.log($event.currentTarget.className);

var abc = $event.currentTarget.className;
angular.element(abc).append('<p class="tooltip2">' + text + '</p>');

};

没有任何事情发生，没有显示工具提示，控制台中有类打印afterme。

当我使用下面的代码（附加到正文）时它的工作正常：

var body = angular.element(document).find('body');
body.append(...);

Answer 1

好吧，我把它解决了，只是将$event.currentTarget.className;更改为$event.target

和.append到.after以避免重复工具提示。

所以代码变成：

$scope.showToolTip = function(text,$event){
     angular.element($event.target).after('<p class="tooltip2">' +text+ '</p>');
};
$scope.hideToolTip = function($event) {
     angular.element(document).find('.tooltip2').remove();
};

html保持不变。

让我知道如果我在AngularJS中添加了最简单的自定义工具提示：）

这是CSS：

.tooltip2 {
        display:block;
        position:absolute;
        border:1px solid #333;
        background-color:#161616;
        border-radius:5px;
        padding:10px;
        color:#fff;
        font-size:12px Arial;
    }

现在正常工作

Answer 2

使用jqlite的angular.element不会进行元素选择，据我从文档中可以看出。这意味着angular.element（abc）不起作用（尽管这应该是angular.element（＆＃39;。＆＃39; + abc））事件

$ event.currentTarget是对实际html节点的引用，这意味着你可以angular.element($event.currentTarget).append('<p class="tooltip2">' + text + '</p>');};

但请记住，这不是以角度方式执行此操作的正确方法。你永远不应该在控制器中操纵DOM。这些东西是为指令保留的。

指令可以直接访问angular元素（通过链接函数中的参数传入），并允许您绑定所需的事件。控制器只应用于维护数据。

Answer 3

尝试以下

angular.element(document.querySelector('.className')).append(...);

单击事件后无效 - AngularJS

3 个答案: