javascript - 鼠标悬停时 AngularJS 图像源发生变化

Question

我试图在 AngularJS 中的鼠标悬停时更改图标，但遇到了很大的困难。我的菜单是由 Angular 解释为 HTML 的 JSON 对象生成的。每个菜单项都是其自己的对象，具有自己的标题、链接、图标和替代图标。

目前我的 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 对象中指定的图标路径。 ng-mouseover和ng-mouseout根据 JSON 值将此变量更改为不同的路径。 <img> <div>内然后使用这个已建立的变量作为其ng-src .

加载页面时， <div> 中的值已正确生成(它们显示 JSON 对象中存储的正确路径)，但 <img src>路径仍然以括号表示法( {{item.icon}} 或 {{item.alticon}} )显示，而不是实际路径(例如 icon/assessment.png )，这会导致图像损坏。

以下是正在解释的 JSON 对象的示例:`

[
  {
    "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

正如评论中所讨论的，错误是您在表达式绑定(bind)中使用了大括号(最后有更多解释)。

这不会起作用:(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 中向指令传递信息的唯一方式，而是多种方式:

• 单向绑定(bind) ( @ )，它将把一个字符串分配给一个变量。该字符串可以包含动态的大括号。例如ng-src <img> 的属性标签，例如 <img ng-src="some/path/{{dynamicName}}.png">

• 两种绑定(bind)方式( = )，其中 Angular 需要一个变量并保留对其的引用。例如ng-model在 <input> tag:当输入修改时，ngModel中的变量也会在上层范围内被修改

• 表达式绑定(bind) ( & )， Angular 期望一个将在特定操作上执行的表达式(完整的代码片段)。就是ng-init的情况, ng-click等等。没有花括号，只是一行将被处理的代码，例如 itemsrc = item.icon; (这里可以有 ; ，它是代码，但没有 {{}} )