AngularJS渲染<br>为纯文本而不是HTML

我已经下载了AngularJS模板：https://github.com/bennkingy/angularJs-startbootstrap-modern-business AngularJS渲染<br>为纯文本而不是HTML

我编辑主页上的滑块显示：
欢迎Belcon
阁楼&木工

然而，被显示为如下纯文本：

Welcome to belcon <br> Lofts & Carpentry

\t \t $scope.active = 0; 
 
\t \t var slides = $scope.slides = [ 
 
\t \t \t \t {image: 'http://placehold.it/1900x455&text=Slide One', text: 'Welcome to belcon<br>alofts & carpentry', id: 0 }, 
 
\t    {image: 'http://placehold.it/1900x455&text=Slide Two', text: 'Caption 2', id: 1 }, 
 
\t    {image: 'http://placehold.it/1900x455&text=Slide Three', text: 'Caption 3', id: 2 }, 
 
\t \t \t \t  {image: 'http://placehold.it/1900x455&text=Slide Four', text: 'Caption 4', id: 3 } \t 
 
\t \t ];

 <uib-carousel active="active" interval="slideInterval" no-wrap="noWrapSlides"> 
 
      <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"> 
 
       <img ng-src="{{slide.image}}" style="margin:auto;"> 
 
       <div class="carousel-caption"> 
 
        <h2>{{slide.text}}</h2> 
 
       </div> 
 
      </uib-slide> 
 
     </uib-carousel>

我怎么会去使文字：HTML友好？

三江源。

来源

2017-08-05 BennKingy

您可以使用$sce这一点。你必须使用ngSanitize角度指令。在你的模块中注入ngSanitize，在你的控制器中注入$sce。

angular.module('mySceApp', ['ngSanitize']) 
 
    .controller('AppController', ['$http', '$templateCache', '$sce', 
 
    function AppController($http, $templateCache, $sce) { 
 
     var self = this; 
 
     self.userComments = [ 
 
\t \t \t \t {image: 'http://placehold.it/1900x455&text=Slide One', text: 'Welcome to belcon<br>alofts & carpentry', id: 0 }, 
 
\t    {image: 'http://placehold.it/1900x455&text=Slide Two', text: 'Caption 2', id: 1 }, 
 
\t    {image: 'http://placehold.it/1900x455&text=Slide Three', text: 'Caption 3', id: 2 }, 
 
\t \t \t \t  {image: 'http://placehold.it/1900x455&text=Slide Four', text: 'Caption 4', id: 3 } \t 
 
\t \t ]; 
 
    }]);

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-sce-service-production</title> 
 
    
 

 
    <script src="https://code.angularjs.org/snapshot/angular.min.js"></script> 
 
    <script src="https://code.angularjs.org/snapshot/angular-sanitize.js"></script> 
 
    <script src="script.js"></script> 
 
    
 

 
    
 
</head> 
 
<body ng-app="mySceApp"> 
 
    <div ng-controller="AppController as myCtrl"> 
 
    <div class="well"> 
 
    <div ng-repeat="userComment in myCtrl.userComments"> 
 
     <span ng-bind-html="userComment.text" class="htmlComment"> </span> 
 
     <br> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

从文档：

$ SCE是对AngularJS规定了严格的语境逃脱服务的服务。

For more reference

来源

2017-08-05 09:12:53 Vivz

你必须使用“ngSanitize”指令。请参考以下链接。

https://docs.angularjs.org/api/ngSanitize/service/ $消毒

来源

2017-08-05 09:05:04

至于XSS漏洞的安全，HTML呈现是禁用的角。如果你想启用它的一个块，你应该使用$ sanitize：https://docs.angularjs.org/api/ngSanitize/service/ $ sanitize。

几个exemples如下：

<script> 
    angular.module('sanitizeExample', ['ngSanitize']) 
    .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) { 
     $scope.snippet = 
     '<p style="color:blue">an html\n' + 
      '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' + 
     'snippet</p>'; 
     $scope.deliberatelyTrustDangerousSnippet = function() { 
     return $sce.trustAsHtml($scope.snippet); 
     }; 
    }]); 
</script> 
<div ng-controller="ExampleController"> 
    Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea> 
    <table> 
    <tr> 
     <td>Directive</td> 
     <td>How</td> 
     <td>Source</td> 
     <td>Rendered</td> 
    </tr> 
    <tr id="bind-html-with-sanitize"> 
     <td>ng-bind-html</td> 
     <td>Automatically uses $sanitize</td> 
     <td><pre>&lt;div ng-bind-html="snippet"&gt;<br/>&lt;/div&gt;</pre></td> 
     <td><div ng-bind-html="snippet"></div></td> 
    </tr> 
    <tr id="bind-html-with-trust"> 
     <td>ng-bind-html</td> 
     <td>Bypass $sanitize by explicitly trusting the dangerous value</td> 
     <td> 
     <pre>&lt;div ng-bind-html="deliberatelyTrustDangerousSnippet()"&gt; 
     &lt;/div&gt;</pre> 
     </td> 
     <td><div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div></td> 
    </tr> 
    <tr id="bind-default"> 
     <td>ng-bind</td> 
     <td>Automatically escapes</td> 
     <td><pre>&lt;div ng-bind="snippet"&gt;<br/>&lt;/div&gt;</pre></td> 
     <td><div ng-bind="snippet"></div></td> 
    </tr> 
    </table> 
</div>

来源

2017-08-05 09:22:36

首先，添加ngSanitize到模块的依赖关系。

然后使用该指令ngBindHtml像这样绑定“文本”属性h2元素：

<h2 ng-bind-html="text"></h2>

来源

2017-08-05 18:51:49 Rajat

AngularJS渲染<br>为纯文本而不是HTML

回答

相关问题