javascript - 鼠标悬停和鼠标离开文本颜色更改在指令链接中不起作用

Question

我创建了一个具有嵌入功能的指令，该指令工作正常但问题是，在子嵌入模板中我有一个文本说“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;
});

PLUNKER

谁能告诉我一些解决办法

Answer 1

您正在尝试绑定(bind) 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 .