マウスセンターで角をつけてCSSを変更する

Question

私は、あるコントローラで作成されたダーツと、別のコントローラで作成された均一なスケジュールを持っています。ダーツとイベントの両方にユニークなIDがあります。私はダーツの上にマウスを置いて、同じIDを強調表示したイベントを持ち、イベントの上にマウスを乗せて、同じIDのダーツを強調表示したいと思っています。

ダートコントローラ：

イベントが右側の画像に表示されるとshiftstart、BRK電気ショック療法言っている...私はイベントスケジュールコントローラにダーツコントローラからIDを放送する次のコードを持っています

$scope.clicker = function(id) 
    { 
     $rootScope.$broadcast("id changed", id); 
    } 

イベントcontollerここ

$scope.$on("id changed", function(event, id) 
    { 
      for(let i = 0; i < $ctrl.adherence.events.length; i++){ 
       if($ctrl.adherence.events[i].id == id) 
     console.log("id in on: " + $ctrl.adherence.events[i].id + " other id 
     is " + id); 
     } 
    }); 

はダーツのための私のhtmlで私のNG-のMouseEnterです：

（<img src="${getDartImage(event)}" ng-mouseenter="clicker(${event.id})" class="dart">）。

そして、私のイベントスケジュール

<scheduled-event 

          event="event" 
          ng-repeat="event in $ctrl.adherence.events" 
          ng-mouseenter="$ctrl.clicker1($ctrl.adherence.events[$index].id)"> 



         </scheduled-event> 

のための私のNG-のMouseEnter私はIDと一致し、コンソールログを行うことができる午前しかし、どのようにイベントをクリックすることによりダーツのCSSおよびその逆を変更できますか？

Answer 1

ダーツボードとスコアボードの両方にngMouseenterとngMouseleaveを実装するようにしてください。 IDのようなデータでイベントをブロードキャストするだけです。 https://docs.angularjs.org/api/ng/directive/ngMouseenter https://docs.angularjs.org/api/ng/directive/ngMouseleave

$scope.onDartEnter = function(dartId){ 
    $rootScope.$broadcast('dartEnter',{id: dartId}); 
}; 

$scope.onScoreEnter = function(scoreId){ 
    $rootScope.$broadcast('scoreEnter',{id: scoreId}); 
}; 

変更CSS：

$scope.$on("scoreEnter", function(event, params){ 
    var scoreObject = findScoreById(params.id); // needs implementation 
    scoreObject.customClass = 'enter'; 
}); 

HTML例：

<div ng-repeat="score in scores"> 
    <div id="name" ng-class="score.customClass">{{score.name}}</div> 
</div>