Question

我正在使用ng-bind-html显示angularjs变量：

<div style="font-style:italic;font-size:18px">
    "<span ng-bind-html="quote.body"></span>"
</div>

使用span之外的引号进行解析，如下所示：

<div style="font-style:italic;font-size:18px">
"
<span ng-bind-html="quote.body" class="ng-binding">The level of scientific illiteracy in America provides fertile soil for <strong>political appeals based on ignorance</strong>.

“

如何在这样的范围内得到引号：

<div style="font-style:italic;font-size:18px">
    <span class="ng-binding" ng-bind-html="quote.body">"Testing."</span>
</div>

Answer 1

有几种选择。一种是在表达式中添加引号：

<span ng-bind-html="'&quot;' + quote.body + '&quot;'"></span>

更优选的是使用css。它将样式与实际内容分开，可维护（仅在一个地方更改），并为您提供更多样式的自由：

.quote:before, .quote:after {
  content: '"';
}

<span class="quote" ng-bind-html="quote.body"></span>

我想到的最后一个选择是编写自己的指令。它可以像使用上述解决方案之一一样简单，并且具有将解决方案与使用分开的优点。这意味着您可以在不触及HTML的情况下更改解决方案：

app.directive('quote', function() {
   return {
    scope: {
      quote: '='
    },
    template: '<span ng-bind-html="\'&quot;\' + quote.body + \'&quot;\'"></span>'
  };
});

<span quote="quote"></span>

我创建了一个显示所有三种解决方案的Plunker。

如何使用ng-bind-html在变量的两边添加引号？

1 个答案: