鼠标悬停时AngularJS图像源更改

AngularJS Image Source Change on Mouseover

本文关键字：图像 AngularJS 悬停 鼠标      更新时间：2024-01-17

我正试图在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将初始图标设置为与JSON对象中指定的图标路径等效的变量（itemsrc）。ng-mouseover和ng-mouseout根据JSON值将该变量更改为不同的路径。CCD_ 7内的CCD_ 6然后使用该建立的变量作为其CCD_。

加载页面时，<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>

正如注释所讨论的，错误是在表达式绑定中使用了花括号（最后对此进行了更多解释）。

这将不起作用：（a）

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

这也不起作用：（b）

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

这将：（c）

ng-init="itemsrc = item.icon"

在情况（a）中，itemSrc变量将在没有进一步处理的情况下获得字符串值"{{item.icon}}"，这是非常无用的。

情况（b）是语法错误，可能会产生角度报告错误。

你需要明白，tere并不是一种将信息传递给Angular指令的独特方式，而是多种方式：

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

  • 双向绑定（=），其中angular期望一个变量并将保留对它的引用。例如<input>标签中的ng-model：当被输入修改时，ngModel中的变量也将在的上部范围中修改

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

相关文章：