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

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

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

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

mouseover and mouseleave text color changing not working within directive link

javascript

css

angularjs

angularjs-directive