在$scope变量中转义HTML的快速方法

quick way to escape html in $scope variable

本文关键字：方法 HTML 转义 scope 变量      更新时间：2023-09-26

我有一个初始值

$scope.abc = 'abc'

，也许在点击事件下，我想将值转换为

$scope.abc = '<h1>abc</h1>'

我知道有像ng-bind这样的东西来转义html，但是有没有更快的方法来做到这一点?

不，没有快速转义HTML的方法。事实上，您所看到的许多困难都是故意的和安全的，因为包含任意用户提供的HTML的能力是一个矢量，允许跨站点脚本编写、恶意的整个页面接管和许多其他麻烦。Angular通过让安全地插入任意文本变得非常容易，而插入任意标记变得非常困难，从而解决了这个问题。(当然，你所描述的HTML可能在你的脚本中是硬编码的，但Angular对它们的处理没有必要有任何区别。)

我也不同意改变标记是正确的方法:<h1>与任意<p>, <div>或<span>有非常不同的语义含义，所以如果你想调整字符串在页面中显示的方式，你应该用ng-class或ng-if来做。

// JS
$scope.callOutAbc = true;
// CSS
.called-out { font-size: 36pt; font-weight: bold; /* ... */ }
// HTML
<header ng-class="{ 'called-out': callOutAbc }">{{ abc }}</header>

或

<div ng-if="!callOutAbc">{{ abc }}</div>
<h1 ng-if="callOutAbc">{{ abc }}</h1>
相关文章：