angularJS Custom指令功能使用ng-click但不使用ng-mouseOver

Question

要求如下： - 我离开了导航面板，该面板必须与用户在主活动视图中添加的项目同步，并且必须以树形结构显示。基本思想是提供基于活动视图而变化的上下文感知子视图。

用于显示树结构的自定义指令：https://github.com/nickperkinslondon/angular-bootstrap-nav-tree/blob/master/src/abn_tree_directive.js

我的HTML代码:(使用ng-click）

<div class="add-data-request-panel" style="min-height:1071px;" 
     ng-click="expandPanel()"> 
  <ul>
    <li class="icon-drd icon-drd-diactive" ng-if="panelCollapse" ></li>
    <li class="icon-pie-chart icon-pie-active" ng-if="panelCollapse"></li>
    <li class="icon-publish-req" ng-if="panelCollapse"></li>
    <li class="icon-view-changes" ng-if="panelCollapse"></li>
  </ul>
</div>
        
<div class="data-slider-panel" style="min-height:1071px;display" ng-if="panelExpand">
   <div class="data-slider-row mtop" ng-click="collapsePanel()">
      <div class="slider-row-left">
         <span class="first-char" >S</span>
         <span class="second-char">ection</span>
      </div>
      <div class="slider-row-right">
         <div class="icon-drd icon-drd-diactive">
         </div>
      </div>
   </div>
   <div class="data-slider-row">
      <div class="slider-row-left">
         Section2
         <div class="sub-slider-row-left">
            <abn-tree tree-data="mainArrayObj"></abn-tree> // passing data to tree directive
         </div>
      </div>
      <div class="slider-row-right">
         <div class="icon-pie-chart icon-pie-active">
         </div>
      </div>
   </div>
   <div class="data-slider-row" ng-click="collapsePanel()">
      <div class="slider-row-left">
         Section3
      </div>
      <div class="slider-row-right">
         <div class="icon-publish-req">
         </div>
      </div>
   </div>
   <div class="data-slider-row" ng-click="collapsePanel()">
      <div class="slider-row-left">
         Section4
      </div>
      <div class="slider-row-right">
         <div class="icon-view-changes">
         </div>
      </div>
   </div>
</div>

我的控制器中的JS实现

$scope.panelExpand = false;  //setting default flag
$scope.panelCollapse = true; //setting default flag


$scope.expandPanel = function() {
 $scope.panelExpand = true;
 $scope.panelCollapse = false;
 $scope.mainArrayObj = []; // array that holds the data passed in html to custom directive
 initialJsonSeparator($scope.model.Data); // method used for iteration
};

$scope.collapsePanel = function() {
 $scope.panelExpand = false;
 $scope.panelCollapse = true;
};

我的HTML代码:(使用ng-mouseover无效并显示传递给导航栏的数据）

<div class="add-data-request-panel" style="min-height:1071px;" ng-mouseover="hoverIn()" 
   ng-mouseleave="hoverOut()">
   <ul>
      <li class="icon-drd icon-drd-diactive"></li>
      <li class="icon-pie-chart icon-pie-active"></li>
      <li class="icon-publish-req"></li>
      <li class="icon-view-changes"></li>
   </ul>
</div>

<div class="data-slider-panel" style="min-height:1071px;display"
   ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" ng-show="hoverEdit">
   <div class="data-slider-row mtop">
      <div class="slider-row-left">
         <span class="first-char">S</span>
         <span class="second-char">ection1</span>
      </div>
      <div class="slider-row-right">
         <div class="icon-drd icon-drd-diactive">
         </div>
      </div>
   </div>
   <div class="data-slider-row">
      <div class="slider-row-left">
         Section2
         <div class="sub-slider-row-left">
            <abn-tree tree-data="mainArrayObj"></abn-tree> // array that holds the data passed in html to custom directive
         </div>
      </div>
      <div class="slider-row-right">
         <div class="icon-pie-chart icon-pie-active">
         </div>
      </div>
   </div>
   <div class="data-slider-row">
      <div class="slider-row-left">
          Section3
      </div>
      <div class="slider-row-right">
         <div class="icon-publish-req">
         </div>
      </div>
   </div>
   <div class="data-slider-row">
      <div class="slider-row-left">
         Section4
      </div>
      <div class="slider-row-right">
         <div class="icon-view-changes">
         </div>
      </div>
   </div>
</div>

js ng-mouseOver的实现:(在调试所有迭代和按预期执行的方法时）

$scope.hoverIn = function() {
 this.hoverEdit = true;
 $scope.mainArrayObj = []; // array that holds the data passed in html to custom directive
 initialJsonSeparator($scope.model.Data); //method used to iterate the data
};

$scope.hoverOut = function() {
 this.hoverEdit = false;
};

这个问题的任何解决方案都有帮助。如果除了ng-mouseOver和ng-mouseLeave之外还有其他更好的方法来实现悬停，请告诉我。