AngularJS 鼠标悬停时更改图像源

Question

我试图在 AngularJS 中让图标在鼠标悬停时发生变化，但遇到了很大的困难。我的菜单由 JSON object 生成，由 Angular 解释为 HTML。每个菜单项都是自己的 object，有自己的标题、link、图标和备用图标。

目前我的 HTML 是：

    <ul ng-controller="MenuCtrl" class="ul">
    <li class="profile-li" ng-repeat="item in profileItems" style="white-space:nowrap" width="250px">
        <div width="200px">
            <a href="{{item.link}}" class="return">
                <div ng-init="itemsrc='{{item.icon}}'" ng-mouseover="itemsrc='{{item.alticon}}'" ng-mouseout="itemsrc='{{item.icon}}'" >
                    <img class="icon2" ng-src="{{itemsrc}}"  style="display:inline; float:left;">
                    </img>
                </div>
            </a>
            <a href="{{item.link}}" class="return">
                <span style="display:inline; white-space:nowrap;"><br>&nbsp;&nbsp;{{item.profileItem}}</span>
            </a>
        </div>
    </li>       
</ul>

在 <div> ng-init 中将初始图标设置为一个变量 (itemsrc)，相当于 JSON object 中指定的图标路径。 ng-mouseover 和 ng-mouseout 根据 JSON 值将此变量更改为不同的路径。 <div> 中的 <img> 然后使用这个建立的变量作为它的 ng-src.

加载页面时，会正确生成 <div> 中的值（它们显示存储在 JSON object 中的正确路径），但是 <img src> 路径仍然显示在方括号中（{{item.icon}} 或 {{item.alticon}}），而不是导致图像中断的实际路径（例如 icon/assessment.png）。

这是正在解释的 JSON object 的示例： `

[
  {
    "contentItem": "Orders",
    "link": "#orders",
    "icon": "icon/orders.png",
    "alticon": "icon/ordersb.png"
  },
  {
    "contentItem": "Medication Admin.", 
    "link": "#medAdmin",
    "icon": "icon/medicationAdmin.png",
    "alticon": "icon/medicationAdminb.png"
  },
  {
    "contentItem": "Lab Results", 
    "link": "#labs",
    "icon": "icon/labs.png",
    "alticon": "icon/labsb.png"
  },
  {
    "contentItem": "Vital Signs", 
    "link": "#vitals",
    "icon": "icon/vitals.png",
    "alticon": "icon/vitalsb.png"
  },
  {
    "contentItem": "Assessment", 
    "link": "#assessment",
    "icon": "icon/assessment.png",
    "alticon": "icon/assessmentb.png"
  },
    {
    "contentItem": "Intake & Output", 
    "link": "#io",
    "icon": "icon/intakeOutput.png",
    "alticon": "icon/intakeOutputb.png"
  }
]

下面是 HTML 在浏览器中的示例：

<li class="profile-li ng-scope" ng-repeat="item in profileItems" style="white-space:nowrap" width="250px">
            <div width="200px">
                <a href="#face" class="return">
                    <div ng-init="itemsrc='icon/facesheet.png'" ng-mouseover="itemsrc='icon/facesheetb.png'" ng-mouseout="itemsrc='icon/facesheet.png'">
                        <img class="icon2" ng-src="{{item.icon}}" style="display:inline; float:left;" src="{{item.icon}}">

                    </div>
                </a>
                <a href="#face" class="return">
                    <span style="display:inline; white-space:nowrap;" class="ng-binding"><br>&nbsp;&nbsp;Face Sheet</span>
                </a>
            </div>
        </li>

Answer 1

正如评论所讨论的那样，错误是您在表达式绑定中使用了大括号（最后对此有更多解释）。

这行不通：(a)

ng-init="itemsrc = '{{item.icon}}'"

这也行不通：(b)

ng-init="itemsrc = {{item.icon}}"

这将：(c)

ng-init="itemsrc = item.icon"

In case (a), the itemSrc variable will get the string value "{{item.icon}}" with no further processing, which is quite useless.

The case (b) is a syntax error and will likely make angular report errors.

您需要了解，在 Angular 中，这不是一种将信息传递给指令的独特方式，但有很多：

单向绑定 (@)，它将一个字符串分配给一个变量。该字符串可以包含花括号以是动态的。例如 <img> 标签的 ng-src 属性，例如 <img ng-src="some/path/{{dynamicName}}.png">
两种绑定方式 (=)，其中 angular 需要一个变量并将保留对它的引用。例如<input>标签中的ng-model：当输入修改时，ngModel中的变量也会在上层作用域中被修改
表达式绑定 (&)，angular 期望表达式（完整的代码片段）将在特定操作上执行。就是ng-init、ng-click之类的情况。没有花括号，只是一行会被处理的代码，比如itemsrc = item.icon;（这里可以有;，是代码，但是没有{{}}）

AngularJS 鼠标悬停时更改图像源

AngularJS Image Source Change on Mouseover

javascript

jquery

angularjs

ng-repeat