mouseover和mouseleave文本颜色更改不在指令链接

Question

我创建了一个指令transclude功能，该指令工作正常，但问题是，在儿童transcluded模板我有一个文本说“某人的名字” ，当鼠标悬停时，文本的颜色应该是白色的，当鼠标离开时，它应该是实际分配的颜色。我需要实现这一点没有外部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。