Question

如果我有简单的用户状态下拉菜单，例如：

<a class="dropdown-toggle">
   {{userStatus}}
</a>
<ul class="dropdown-menu" role="menu">
    <li data-ng-click="SwitchStatus('Online')"><i class="fa fa-circle text-green2 pr5"></i> Online</a></li>
    <li data-ng-click="SwitchStatus('Busy')"><i class="fa fa-circle text-red2 pr5"></i> Busy</li>
    <li data-ng-click="SwitchStatus('Away')"><i class="fa fa-circle text-orange2 pr5"></i> Away</li>
</ul>

控制器有这个：

var userStatuses = {
    online: '<i class="fa fa-circle text-green2 pr5"></i>',
    busy: "<i class='fa fa-circle text-red2 pr5'></i>",
    away: "<i class='fa fa-circle text-orange2 pr5'></i>"
};

$scope.userStatus = userStatuses.online; // default online

为什么它会像这样将HTML注入页面：

<a class="dropdown-toggle">
    "<i class='fa fa-circle text-green2 pr5'></i>"
</a>

我该怎么做才能将它作为HTML元素注入而不是字符串？

此外，我很明显我想要实现的目标，而且我刚刚开始使用棱角分明，所以请随意指向另一个方向。我希望在选择不同的状态时最终合并高级逻辑。

谢谢。

Answer 1

在这种特定情况下，我会使用ng-class而不是在模板中粘贴HTML。

AngularJS不是jquery。

请参阅：

<a class="dropdown-toggle">
  <i class='fa fa-circle pr5' ng-class="{'text-green2': userStatuses.online, 'text-red2': userStatuses.busy, 'text-orange2': userStatuses.away}"></i>
</a>

和JavaScript

var userStatuses = {
  online: true,
  busy: false,
  away: false
};
scope.userStatuses = userStatuses;

希望这对你有所帮助。祝你好运！

Answer 2

这是ng-bind-html的用例。除非明确告知，否则Angular不会插入HTML，以防止XSS漏洞。

您的下拉列表应如下所示：

<a class="dropdown-toggle" ng-bind-html="userStatus"></a>

Answer 3

也许我认为更好的方法是将你的html保持在你的控制器之外，并尝试使用ng-class根据userStatus对象更改你的图标类：

<a class="dropdown-toggle">
   <i class="fa fa-circle pr5"
      ng-class="{{ 'text-green2' : userStatus.online,
                   'text-red2' : userStatus.away,
                   'text-orange2': userStatus.busy }}">
   </i>
</a>

在控制器中，跳过您正在使用的var声明并执行此操作

$scope.userStatus = userStatus;

AngularJS - 从控制器注入的html元素被包装在引号中/被视为字符串

3 个答案: