Question

我必须在鼠标上显示图像名称。图像应该由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>

这是我的角度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;
}

请提出您的意见和建议。

Answer 1

尝试使用ng-src：<img ng-src={{selectedActor.photo}}>代替<img src={{selectedActor.photo}}>

Answer 2

您的代码中存在一些不同的问题。对于图像，您需要使用ng-src以便角度表达式可以工作，您还可以将图像放在ng内 - 如果一切正常，则隐藏它。使用ng-repeat时，您可能会发现需要使用$parent来访问Controllers $scope

的时间

请查看这个有效的Plunker 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>

无法在鼠标悬停事件</div>上的<div>标记中显示图像

2 个答案: