Отключить ng-mouseover при щелчке

Question

У меня есть список из десяти элементов, расположенных слева, и когда вы наводите курсор на любую из строк, он отображает этот объект более подробно в div в правой части страницы.

Я хотел бы иметь его, чтобы вы могли также щелкнуть по одной из этих строк, он фокусируется на этой строке, показывая ее с правой стороны и отключая зависания на других строках, пока вы не щелкнете/не сделаете что-нибудь и т. Д.

Я имел взгляд на ng-mouseover on disabled button in Angularjs, но этот ответ использует CSS - не знаю, как включить это в мой код (Полностью реструктуризации это вариант :(!)

HTML

</div> 
    <div class="row" ng-show="resultsExist"> 
     <div class="col-lg-6 col-md-6"> 
      <table class="table"> 
       <tr ng-repeat="doc in docs" ng-init="index = $index + 1" ng-mouseenter="hoverFocus(doc)" ng-click="clickFocus(doc)"> 
        <td>{{index}}</td> 
        <td>{{doc.headline.main}}</td> 
       </tr> 
      </table> 
     </div> 
     <div class="col-lg-6 col-md-6"> 
      <div ng-show="showInfo"> 
       <p>Publication Date: {{infoDoc.pub_date}}</p> 
       <h2>{{infoDoc.headline.main}}</h1> 
       <h3>{{infoDoc.lead_paragraph}}</h3> 
       <p> Source: {{infoDoc.source}}</p> 
       <button target="_blank" href="{{infoDoc.webUrl}}"> See full link here</button> 
      </div> 
     </div> 
    </div> 

JS

$scope.hoverFocus = function(doc) { 
     $scope.showInfo = true; 
     $scope.infoDoc = doc; 
    } 
$scope.clickFocus = function() { 
    // Not sure 
} 

Любая помощь будет оценена, не знаю, как продолжать с этим!

EDIT: Взял меня, но вот скрипка, показывающая более общий обзор. http://jsfiddle.net/v7hx8nho/3/ При наведении указателя на заголовок этого элемента на клике показывается этот элемент и больше не наводится, пока вы не нажмете.

Answer 1

Несколько предложений,

1. Вы можете использовать CSS, чтобы отключить события мыши на другие элементы, https://developer.mozilla.org/en/docs/Web/CSS/pointer-events так в то время, когда вы хотите, чтобы отключить парения добавить этот стиль, используя ng- класс или что-то еще.

2. На ваших нг-mousever функции обработки событий, создать при выполнении условия и проверьте, чтобы показать информацию или нет, например,

$scope.hoverFocus = function(doc) { 
 
     if ($scope.on == false) return; 
 

 
     $scope.showInfo = true; 
 
     $scope.infoDoc = doc; 
 
    }

Answer 2

Там вы идете: http://jsfiddle.net/v7hx8nho/11/enter code here

Вы можете установить логическое значение, если оно нажато или нет, и проверьте его в функции hoverFunction ... После того, как это правда, заголовок есть и не наводится, после того, как вы нажмете второй раз, он будет ложным, и зависание включается ... Приветствия