ng-mouseover和ng-show无效

时间:2016-08-11 10:35:09

标签: javascript angularjs

我希望在图像悬停时显示文件的名称。这是使用ng-mouseover的当前代码,但它不起作用。我出了什么问题?

<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>

2 个答案:

答案 0 :(得分:1)

关于ng-repeat的孤立范围:Directive isolate scope with ng-repeat scope in AngularJS

将内容从该隔离范围中移出并显示在悬停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>

答案 1 :(得分:0)

我最终使用了不同的方法并使其正常运行。谢谢大家。

<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>