單擊事件后無效 - AngularJS

Question

我想在AngularJS中使用簡單的工具提示。

這是我的HTML：

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

是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 to .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（'。'+ abc））事件

但是，$ event.currentTarget是對實際html節點的引用，這意味着你可以做angular.element($event.currentTarget).append('<p class="tooltip2">' + text + '</p>');};

但請記住，這不是以角度方式執行此操作的正確方法。 你永遠不應該在控制器中操縱DOM。 這些東西是為指令保留的。

指令可以直接訪問angular元素（通過link函數中的參數傳入），並允許您綁定所需的事件。 控制器應僅用於維護數據。

Answer 3

嘗試以下方法

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