[AngularJS]不能显示在图像
在鼠标悬停事件标记

发布时间: 2016/5/16 3:28:47
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我要在名称上在显示图像上鼠标。图像应该由 div 标签中的文本替换。我用控制器。我需要使用到背景样式图像吗? 这是我的 html 文件

<!DOCTYPE html>
<html>
  <head>

 <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
    <link rel="stylesheet" href="st.css" />
    <script src="sf_1.js" type="text/javascript"></script>
</head>

<body ng-app='sampleApp' ng-controller="mainCtrl">

    <div class="selectedActor">
        <div ng-if="!selectedActor" mousable>
            Hover the mouse over a tab with actor's name to see the photo here.
            <img src={{selectedActor.photo}}>
        </div>

        <div>{{ selectedActor.name}}</div>
    </div>

    <div class="list">
        <div
            ng-class="{ 'actor': true, 'selected': selectedActor === actor }"
            ng-repeat="actor in actors"
            ng-mouseover="selectedActor = actor"
            ng-mouseleave="selectedActor = null">
            <div>{{ actor.name}}</div>
        </div>
    </div>

</body>

</html>

这是我 angular js 文件

var app = angular.module('sampleApp', [])
.controller('mainCtrl', function($scope) {
 $scope.actors = [
 {
  name: 'Leonardo DiCaprio',
  photo: 'http://www.hollystock.com/images/celebs/mid/5069.jpg'
},
{
  name: 'Angelina Jolie',
  photo: 'http://www.hollystock.com/images/celebs/mid/504.jpg'
},
{
  name: 'George Clooney',
  photo: 'http://www.hollystock.com/images/celebs/mid/2922.jpg'
}
];
});

这是我的 CSS 文件

.selectedActor {
 border: 1px solid grey;
 display: inline-block;
 padding: 10px;
 border-radius: 20px;
 width: 250px;
 height: 80px;
 }

.selectedActor > * {
display: inline-block;
vertical-align: middle;
padding: 5px;
}

.actor {
display: block;
padding: 10px;
 border-radius: 10px;
border: 1px solid gray;
margin-top: 5px;
}

.actor.selected {
background: #3ebede;
color: white;
}

请把你的忠告和建议。

解决方法 1:

您的代码中有几个不同的问题。为图像,您需要使用 ng-srcangular 表达式可以工作,你也有你的形象里,吴-如果其中隐藏它,一旦我的工作。也使用时 ng-repeat 您可能会发现时代你需要使用 $parent 来获得访问权限Controllers $scope

请查阅此工作呆瓜http://plnkr.co/edit/i2Twq00ux8bXTk3ZBPCD?p=preview

<div class="selectedActor">
    <div ng-if="!selectedActor" mousable>
        Hover the mouse over a tab with actor's name to see the photo here.
    </div>
    <div>
        {{ selectedActor.name}}
        <img ng-src="{{selectedActor.photo}}">
    </div>
</div>
<div class="list">
    <div
    ng-class="{ 'actor': true, 'selected': selectedActor === actor }"
    ng-repeat="actor in actors"
    ng-mouseover="$parent.selectedActor = actor"
    ng-mouseleave="$parent.selectedActor = null">
        <div>{{ actor.name}}</div>
    </div>
</div>
赞助商