AngularJS - JS 中的 HTML - 转义单引号答案

【问题标题】：AngularJS - HTML in JS - Escaping single quoteAngularJS - JS 中的 HTML - 转义单引号
【发布时间】：2014-05-22 22:42:10
【问题描述】：

我需要在 javascript 中执行此操作，我无法在 html 中执行此操作（至少在不破坏所有内容的情况下，我希望稍后将其放入 html 中）。

如果是纯 html，则 div 看起来像这样 ('my-border')：

<div class="col-xs-12" ng-class="{'my-border': hasBorder">...</div>

但是由于它是在javascript中，整个html行需要用单引号引起来（'我的边界'）：

template: '<div class="col-xs-12" ng-class="{'my-border': hasBorder">...</div>'

我尝试了以下方法（来自this stackoverflow question）：

“我的边界”

template: '<div class="col-xs-12" ng-class="{"my-border": hasBorder">...</div>'

\'我的边框\'

template: '<div class="col-xs-12" ng-class="{\'my-border\': hasBorder">...</div>'

'我的边界'

template: '<div class="col-xs-12" ng-class="{&#39;my-border&#39;: hasBorder">...</div>'

但我得到 语法错误：意外字符串

我是这个组的新手，所以我首先搜索了档案，没有找到任何东西。如果有人可以帮助我或将我链接到现有主题，我将不胜感激！

非常感谢您的宝贵时间！！

香农：]

【问题讨论】：

【解决方案1】：

我在您的代码中看到的唯一问题是您的 ng-class 指令中未终止的大括号，它缺少 } 符号。添加后，转义单引号应该可以解决您的问题。

template: '<div class="col-xs-12" ng-class="{\'my-border\': hasBorder}">...</div>'

以Plunker 为例。

【讨论】：

哦，天哪，我不知道我是怎么错过的，太好了，谢谢！但是，我仍然收到 Error: Invalid template
你能用你的代码发布一个 plunker，它可以帮助我们跟踪这些问题。
我想 - 我只是不知道该怎么做。我对网络开发非常陌生，我正在尝试使用 KendoUI 创建一个网格。 KendoUI 为每一列设置了字段，例如字段、标题、宽度和模板。模板是将放入列中的 HTML。在我的网格中，当他们的 json 响应中的 hasBorder 字段设置为 true 时，我希望在任何单元格周围都有一个彩色边框。无论如何，这是一个基本想法的笨蛋，我希望这会有所帮助 - plnkr.co/edit/dA3od4ZGRxarOrnwVFWl?p=preview
已解决，非常感谢您的帮助 ryeballar，\' 非常适合 my-border，我有一个单独的语法错误：'
#: previousValue
' 我错过了 #（kendoUI 语法），它应该如下所示： '
#: previousValue #跨度>
'
是的，您可以改用 templateUrl 选项。例如templateUrl: 'templates/my_row.html'

【解决方案2】：

我遇到了类似的问题，但我试图在 html 中转义单引号。我最终通过使用双反斜杠解决了它：

<div my-directive="'Here\\'s a message with a single quote.'"></div>

【讨论】：

【解决方案3】：

你不必引用类：

<div class="col-xs-12" ng-class="{my-border: hasBorder}">...</div>

当hasBorder 计算结果为真时，这会将my-border 类添加到 div。

【讨论】：

我得到一个错误：这个模板无效
出于好奇，我进入了使用 my-border 类的 HTML，它看起来像这样：
我从 html 中删除了 'my-border' 周围的'''并运行它并得到一堆错误，所有这些都与以下内容匹配：错误：[$ parse:syntax] 语法错误：标记 '-' 是意外的，期待 [:]
确实，您通常不必在 className 周围加上引号，但是当您在 className 中使用破折号时，您确实需要将其放在引号中

【解决方案4】：

不会

template: "<div class=\"col-xs-12\" ng-class=\"{'my-border': hasBorder\">...</div>"

工作？

【讨论】：

这不是我试图逃避的双引号，而是 'my-border' 周围的单引号给我带来了问题。我尝试在这些上使用转义\字符，如下所示： template: '
...
'但没有运气。不过还是谢谢你的回复！
Jep，我只是认为扭转它会是解决方案...... :)
抱歉，没有解决我的问题。 ryeballar 的解决方案确实解决了我的问题。感谢您的贡献！