Question

我已经下载了一个AngularJS模板：https://github.com/bennkingy/angularJs-startbootstrap-modern-business

我正在编辑主页上的滑块以显示：
欢迎来到Belcon
阁楼＆amp;木工

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

＆＃13;

Welcome to belcon <br> Lofts & Carpentry

＆＃13;

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

＆＃13;

       <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>

＆＃13;

我如何制作文字：html友好？！

三江源。

Answer 1

你必须使用＆＃34; ngSanitize＆＃34;指示。请参阅以下链接。

https://docs.angularjs.org/api/ngSanitize/service/ $ sanitize方法

Answer 2

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

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

<!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

Answer 3

作为XSS漏洞的安全性，HTML呈现对角度禁用。如果你想为它的一部分启用它，你应该使用 $ sanitize ：https://docs.angularjs.org/api/ngSanitize/service/ $ sanitize。

以下几个例子：

<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>

Answer 4

首先，将ngSanitize添加到模块依赖项。

然后使用指令ngBindHtml将'text'属性绑定到h2元素，如下所示：

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

AngularJS渲染<br/>作为纯文本而不是html

4 个答案: