изменение цвета курсора мыши и mouseleave не работает в директивной ссылке

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.