css - 在 mouseenter 上以 Angular 更改 CSS

Question

我有一个在一个 Controller 中创建的飞镖和一个在另一个 Controller 中创建的偶数计划。飞镖和事件都有唯一的 ID。我希望能够将鼠标悬停在飞镖上并突出显示具有相同 ID 的事件，并将鼠标悬停在事件上并突出显示具有相同 ID 的飞镖。事件显示在右侧的图像上，并表示 shiftstart、BRK 等...我有以下代码，它将 id 从 dart Controller 广播到事件计划 Controller :

飞镖 Controller :

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

事件 Controller

$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);
        }
    });

这是我的 dart html 中的 ng-mouseenter:

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

还有我的 ng-mouseenter 用于我的事件安排

<scheduled-event

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



                        </scheduled-event>

我能够匹配 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>