mouseover和mouseleave文本颜色更改在指令链接中不起作用

mouseover and mouseleave text color changing not working within directive link

本文关键字：指令 链接 不起作用 mouseleave 文本 颜色 mouseover      更新时间：2023-09-26

我创建了一个具有transclude功能的指令，该指令运行良好，但问题是，在子transclude模板中，我有一个文本，上面写着"Some Name"，当鼠标悬停时，文本的颜色应该是白色，当鼠标离开时，它应该是实际分配的颜色。我需要在没有外部css文件的情况下实现这一点

我尝试了以下代码，但它似乎不起作用

elem.find("a").bind("mouseover", function()
{
    scope.actualColor = angular.copy(scope.textColor.color);
    scope.textColor.color = "#000000";
});
elem.find("a").bind("mouseleave", function()
{
    scope.textColor.color = scope.actualColor;
});

柱塞

有人能告诉我这个的一些解决方案吗

您试图绑定AngularJs世界之外的事件，AngularJs无法检测到任何更改。您需要使用scope.$apply()让AngularJs知道scope:上有一些更改

        elem.find("a").bind("mouseover", function()
        {
            scope.actualColor = angular.copy(scope.textColor.color);
            scope.textColor.color = "#000000";
            scope.$apply();
        });
        elem.find("a").bind("mouseleave", function()
        {
            scope.textColor.color = scope.actualColor;
            scope.$apply();
        });

Plunkr。

相关文章：