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内，将初始图标设置为与JSON对象中指定的图标路径等效的变量（itemsrc）。 ng-mouseover和ng-mouseout根据JSON值将此变量更改为不同的路径。 <img>中的<div>然后将此已建立的变量用作其ng-src。

加载页面时，<div>中的值会相应生成（它们显示存储在JSON对象中的正确路径），但<img src>路径仍以括号表示法显示（{ {1}}或{{item.icon}}），而不是导致图像中断的实际路径（{{item.alticon}}）。

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

icon/assessment.png

以下是浏览器中HTML的示例：

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

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">
两种方式绑定（=），其中angular期望变量并保持对它的引用。例如ng-model标记中的<input>：当输入修改时，ngModel中的变量也将在较高范围内修改
表达式绑定（&），其中angular期望将在特定操作上执行的表达式（完整的代码片段）。这是ng-init，ng-click之类的情况。没有curcly括号，只是一行代码将被处理，例如itemsrc = item.icon;（您可以在此处;，它是代码，但没有{{}}）

鼠标悬停时AngularJS图像源更改

1 个答案: