角度$ sanitize与ng-bind-html

时间:2016-11-19 20:35:40

标签: html angularjs html-sanitizing

我正在使用角色ng-bind-html将此文字绑定到页面:

Ale
skoro nikdy sa nepozeráme na priemerné produkty s údivom, že nie sú skvelé.
Priemerné služby a produkty robia to, čo sa od nich očakáva. Nastavili ale
latku tak nízko, že skoro ani nemá cenu urobiť kvôli ním pár krokov navyše, aby
ste si ich kúpili.<div><br></div><div><br></div><div>Prečo
nie je každé jedlo v reštaurácii skvelou kúpou za svoju cenu? Vyzerá to, ako by
sme ochotne brali všetko viac menej zlé za prijateľné, s výnimkou prípadov, keď
daný produkt, služba alebo firma nestoja úplne za nič.</div><div><br></div><div><br></div><div>Vyzvite priemernosť vo
vašej firme na súboj.&nbsp;Pretože presne takýto pohľad priemernosti na vás, môžu
mať aj vaši zákazníci.</div>

所以你可以看到它包含各种html标记编码字符。 ng-data-bind处理得非常正确,因此文本在页面上是可读的。

但是当我使用$sanitize来解析html字符时,我会得到这个:

Ale&#10;skoro nikdy sa nepozer&#225;me na priemern&#233; produkty s &#250;divom, &#382;e nie s&#250; skvel&#233;.&#10;Priemern&#233; slu&#382;by a produkty robia to, &#269;o sa od nich o&#269;ak&#225;va. Nastavili ale&#10;latku tak n&#237;zko, &#382;e skoro ani nem&#225; cenu urobi&#357; kv&#244;li n&#237;m p&#225;r krokov navy&#353;e, aby&#10;ste si ich k&#250;pili.<div><br></div><div><br></div><div>Pre&#269;o&#10;nie je ka&#382;d&#233; jedlo v re&#353;taur&#225;cii skvelou k&#250;pou za svoju cenu? Vyzer&#225; to, ako by&#10;sme ochotne brali v&#353;etko viac menej zl&#233; za prijate&#318;n&#233;, s v&#253;nimkou pr&#237;padov, ke&#271;&#10;dan&#253; produkt, slu&#382;ba alebo firma nestoja &#250;plne za ni&#269;.</div><div><br></div><div><br></div><div>Vyzvite priemernos&#357; vo&#10;va&#353;ej firme na s&#250;boj.&#160;Preto&#382;e presne tak&#253;to poh&#318;ad priemernosti na v&#225;s, m&#244;&#382;u&#10;ma&#357; aj va&#353;i z&#225;kazn&#237;ci.</div>

那么如何在控制器中模仿ng-bind-html来清除文本并进一步使用呢?

编辑:对我来说更清楚,我不需要将此文本绑定到视图。这已经有效了。我需要在控制器的逻辑中处理文本,所以我只需要清理它并进一步使用它。

1 个答案:

答案 0 :(得分:0)

$ sce.trustAsHtml()应该被使用。

HTML:

<td ng-bind-html="mData.data | unsafe"></td>

JS:

mOverview.controller('appController', function ($scope, $sce) {
  $scope.mData = [
    {
        'data': 'your data'
    }
    ];
});

mOverview.filter('unsafeFilter', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});