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。