如何通过ngStyle/ngClass在对象中引入Font Awesome图标并绑定到HTML？

你遇到的问题主要有两个核心点：一是数据结构的语法错误，二是混淆了ngStyle和ngClass的作用——Font Awesome图标是通过CSS类实现的，不能直接放在ngStyle的对象里（ngStyle只负责设置内联CSS样式）。下面一步步给你讲正确的做法：

1. 先修正你的数据结构 #

你原来的$scope.Items语法存在错误，数组内的对象写法不符合JS规范，而且要把图标类和样式属性分开管理。比如改成这样：

$scope.Items = [
  {
    obj: { data: 65476756, right: 12344, title: "Income" },
    elementStyle: { "font-size": "20px", "text-align": "center" },
    iconClasses: "fa fa-level-up" // 单独存储Font Awesome的类名
  }
];

2. 明确ngStyle和ngClass的分工 #

• ngStyle：专门用来绑定内联CSS样式（比如字体大小、文本对齐这类样式属性），对应上面的elementStyle字段。
• ngClass：专门用来绑定CSS类名（包括Font Awesome的图标类），对应上面的iconClasses字段。

3. 正确的HTML绑定方式 #

假设你的my-widget是自定义指令，下面分两种场景给出绑定示例：

场景一：在指令模板内渲染图标 #

如果my-widget需要自己渲染图标，你可以在指令的模板里这样写：

<!-- my-widget指令的内部模板 -->
<div ng-style="widgetStyle">
  <i ng-class="widgetIcon"></i>
  <h4>{{widgetData.title}}</h4>
  <p>数据：{{widgetData.data}}</p>
</div>

然后在父页面的HTML中传递参数：

<div ng-repeat="item in Items">
  <div my-widget 
       widget-data="item.obj" 
       ng-style="item.elementStyle" 
       widget-icon="item.iconClasses">
  </div>
</div>

场景二：在父元素中直接渲染图标 #

如果不需要指令处理图标，也可以直接在父元素里结合样式和图标：

<div ng-repeat="item in Items" ng-style="item.elementStyle">
  <i ng-class="item.iconClasses"></i>
  <div my-widget data="item.obj"></div>
</div>

为什么你的原代码不生效？ #

你之前把"icon":"fa fa-level-up"放在了ngStyle绑定的对象里，但ngStyle只会把对象内的键值对解析为合法的内联CSS样式，而icon并不是一个有效的CSS属性，浏览器完全无法识别这个配置，自然不会显示Font Awesome图标——必须把图标类名添加到元素的class属性中，这正是ngClass的职责。

内容的提问来源于stack exchange，提问作者ronaldino