单击事件不起作用后追加 - AngularJS

append after clicked event not working - AngularJS

本文关键字：AngularJS 追加 事件 不起作用 单击      更新时间：2024-05-20

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

这是我的 HTML：

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

hrere is 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(...);

angular.element with jqlite 不做元素选择，据我从文档中可以看出。这意味着angular.element(abc(不起作用(尽管这应该是angular.element('."+ABC(无论如何(事件

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

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

指令将允许您直接访问角度元素(通过链接函数中的参数传入(，并允许您在那里绑定所需的事件。控制器应仅用于维护数据。

请尝试以下操作 

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

好吧，我解决了它，只是将$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;
    }

现在工作正常

相关文章：