AngularJSは、私はAngularJSテンプレートをダウンロードした

をhtmlのではありませんAngularJSは、私はAngularJSテンプレートをダウンロードした

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

をサニタイズ。あなたは角度の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に厳格な文脈エスケープサービスを提供するサービスです。 XSSの脆弱性に対するセキュリティとして

For more reference

出典

2017-08-05 09:12:53 Vivz

"ngSanitize"指示文を使用する必要があります。以下のリンクを参照してください。

https://docs.angularjs.org/api/ngSanitize/service/ $あなたはこのために$sceを使用することができます

出典

2017-08-05 09:05:04

、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を追加します。

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

：

次に、このようにディレクティブngBindHtmlを使用してH2要素に「テキスト」プロパティをバインド

出典

2017-08-05 18:51:49 Rajat

AngularJSは、私はAngularJSテンプレートをダウンロードした

答えて

関連する問題