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。我尝试了几种不同的方法来转换、编译等。 testimonial-Text 无济于事。非常感谢任何帮助！

Answer 1

更新：

如果有人遇到同样的问题...

我最终通过将以下内容添加到我的控制器来修复它：

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>

AngularJS 指令 - 将文本呈现为 HTML 内容

AngularJS directive - Rendering text as HTML content

html

directive

angularjs

ngsanitize