AngularJSディレクティブ - レンダリングHTMLコンテンツ

Question

として、私は次のディレクティブを持っているテキスト：

myApp.directive('testimonialCard', [function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      linkUrl: '@', 
      authorName: '@', 
      authorTitle: '@', 
      authorCredentials: '@', 
      testimonialText: '@', 
      testimonialTextClass: '@', 
      visualUrl: '@', 
      iconClass: '@' 
     }, 
     controller: function() { 
     }, 
     templateUrl: '/templates/testimonialCard.html', 
     transclude: false 
    }; 
}]); 

そして、次のテンプレート：

<script type="text/ng-template" id="/templates/testimonialCard.html"> 
<a data-ng-href="{{::(linkUrl || '#') }}" 
    class="testimonial-card col-xs-12 col-sm-12 col-md-8 col-lg-8 {{::css_class}}" 
    data-ng-class="::(visualUrl)) ? 'with-icon' : 'without-icon'" > 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <div class="row testimonial"> 
       <div class="col-xs-12"> 
        <div class="testimonial-card-summary"> 
         <span class="decorative_quote">“​‌</span> 
         <div class="testimonial-card-summary-text" > {{::testimonialText}} </div> 
        </div> 
       </div> 
      </div> 
      <div class="row author-info"> 
       <h4 class="name col-xs-12">{{::authorName}}<span data-ng-if="::(authorTitle)" class="academic-degree">, {{::authorTitle}}</span></h4> 
       <div class="field-content credentials">{{::authorCredentials}}</div> 
       <span class="testimonial-card-visual pull-right" data-ng-if="::(visualUrl || iconClass)"> 

        <img data-ng-if="::visualUrl" 
         data-ng-src="{{::visualUrl}}" 
         class="testimonial-card-icon pull-right" 
         data-ng-class="::iconClass" 
        /> 
        <div data-ng-if="::!visualUrl" 
         class="testimonial-card-icon" 
         data-ng-class="::iconClass"></div> 

       </span>     
      </div>     
     </div> 
    </div> 
</a> 

エンドユーザーのような証言カードを記入：

<testimonial-card 
    link-Url="http://www.somewebaddress.com" 
    author-Name="John Doe" 
    author-Title="Ph.D" 
    author-Credentials="Some University Creds" 
    testimonial-Text="<p>Donec sollicitudin molestie malesuada.</p><p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</p><p>Vivamus suscipit tortor eget felis porttitor volutpat.</p>" 
    testimonial-Text-Class="" 
    visual-Url="http://www.somewebaddress.com/someimage.jpg" 
    icon-Class=""></testimonial-card> 

あなたが推測できるように、テキストは入力時に表示されています。私はこれをhtmlに変換する必要があります。私はいくつかの異なる方法を試してみました。あなたの証言を無用に変換、コンパイルなどしてください。どんな助けでも大歓迎です！

Answer 1

UPDATE：誰もが同じ問題を抱えている場合には

...

私は自分のコントローラに以下を追加して、それを固定してしまった：

controller: function ($scope,$sce, $log) { 
       $scope.testimonialContent = $sce.trustAsHtml($scope.testimonialText); 
      }, 

そして、私のテンプレートで：

<div class="testimonial-card-summary-text" > {{::testimonialText}} </div> 

：

は私が変更しましたこれに

：

<div class="testimonial-card-summary-text" ng-bind-html="testimonialContent"></div> 

---