鼠标悬停时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>

在a中,<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

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

这不起作用:(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中的指令的唯一方法,但是很多:

• 单向绑定(@),它将字符串赋值给变量.该字符串可以包含大括号以表示动态.例如标签的ng-src属性<img>,例如<img ng-src="some/path/{{dynamicName}}.png">

• 两种方式binding(=),其中angular期望变量并保持对它的引用.例如,ng-model在<input>标记中:当通过输入修改时,ngModel中的变量也将在较高范围中修改

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