ng-mouseover and ng-show not working

Question

I want to show the name of the file when the images are hovered over. This is the current code with the ng-mouseover but it's not working. What am I going wrong?

<div class="row" ng-init="IconTooltip=false">
    <p ng-show="IconTooltip">file: {{kus.text | specialCharClean}}</p>
    <a ng-repeat="kus in tl_kus"  ng-mouseover="IconTooltip=true" ng-mouseleave="IconTooltip=false" ui-sref="app.feedkus({kus:(kus.text|ampToDash)})">
        <img class="img-responsive" src="../images/kusegory-icons/{{kus.text | specialCharClean}}.png" width="30">
    </a>
</div>

for sure you can not access kus in the paragraph if it is outside the ng-repeat... — Kenneth Van den Berghe, Aug 11 '16 at 10:45
Oh! How do I go about it then? For testing, removing `{{kus.text | specialCharClean}}` doesn't working either. Atleast `file:` should show. — Elaine Byene, Aug 11 '16 at 10:46

score 1 · Answer 1 · edited May 23 '17 at 10:28

1

About isolated scope of ng-repeat: Directive isolate scope with ng-repeat scope in AngularJS

Example of getting stuff out of that isolated scope and showing on hover https://plnkr.co/edit/fquwzjmIKGKUzgnfvkSA?p=preview

<ul>
  <li ng-repeat="item in main.items" ng-mouseover="main.showText=true;main.selectedItem = item" ng-mouseleave="main.showText=false;main.selectedItem={}">{{item.text}}</li>
</ul>

<p ng-show="main.showText">Hovering over {{main.selectedItem.id}}</p>

edited May 23 '17 at 10:28

Community

1
1

answered Aug 11 '16 at 11:03

Kenneth Van den Berghe

265
3
15

EDIT: Here you can see we declare at the global scope a variable and set it to false, then in the ng-repeat we set it on hover to true => doing so we only affect the isolated version of the variable. https://plnkr.co/edit/P7Tr7T5k9pHhtYGquJ6g?p=preview – Kenneth Van den Berghe Aug 11 '16 at 11:07
Trying to make my code work with your example. Thanks but struggling to get it working :( – Elaine Byene Aug 11 '16 at 11:16
If you get stuck, ready to help. If this answer was enough to get you going, please accept. – Kenneth Van den Berghe Aug 11 '16 at 11:36
I used another technique and answered my own question. Thank You. – Elaine Byene Aug 11 '16 at 12:22

score 0 · Answer 2 · answered Aug 11 '16 at 12:22

I ended up using a different approach and got it working. Thank you everyone.

<div class="row">
    <p ng-init=hover_kus="text:''">{{hover_kus.text}}</p>
    <a ng-repeat="kus in tl_kus" ng-mouseover="hover_kus.txt=cat.text" ui-sref="app.feedkus({kus:(kus.text|ampToDash)})">
        <img class="img-responsive" src="../images/kusegory-icons/{{kus.text | specialCharClean}}.png" width="30">
    </a>
</div>

ng-mouseover and ng-show not working

2 Answers2