AngularJS指令 - 渲染文本作爲HTML內容

我有以下指令：AngularJS指令 - 渲染文本作爲HTML內容

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。我已經嘗試了幾種不同的方法來轉換，編譯等證明文本無濟於事。任何幫助是極大的讚賞！

來源

2016-09-22 SaintNexcis

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>

來源

2016-09-27 14:07:21 SaintNexcis

AngularJS指令 - 渲染文本作爲HTML內容

回答

相關問題