将 html 绑定到 angular-ui-bootstrap 手风琴

Question

我正在使用 angular-ui-bootstrap 手风琴。我在 ng-repeat。在我的手风琴标题中，我试图绑定到其中包含 html 的范围变量。我正在尝试将 html 与 data-ng-bind-html 和 angular $sce 服务绑定。我还在 app.js.

中注入了 ngSanitize

但是我没有得到我想要的结果。这是我的手风琴标题：

<accordion close-others="true">
        <accordion-group class="row" data-ng-repeat="content in pageContent" data-ng-if="content.pageId === page.id">
            <accordion-heading data-ng-bind-html="trustedHtml(content.columnTitle)" ></accordion-heading>
            <!-- rest of content -->
       </accordion-group>
      </accordion>

在我的控制器中，我注入了 $sce，这是 $scope 方法：

$scope.trustedHtml = function (input) {

        return $sce.trustAsHtml(input);
    }

谁能帮我解决这个问题？

Answer 1

与其使用控制器和模型执行此操作，不如使用指令模板。将变量传递给模板。提取它的值，然后将其作为指令内的替换值。

Answer 2

尝试执行以下操作，

在HTML,

<accordion close-others="true">
   <accordion-group class="row" data-ng-repeat="content in pageContent" data-ng-if="content.pageId === page.id">
     <accordion-heading ng-bind-html="content.columnTitle | unsafe" ></accordion-heading>
            <!-- rest of content -->
   </accordion-group>
</accordion>

在Javascript,

app.filter('unsafe', function($sce) {
  return function(val) {
      return $sce.trustAsHtml(val);
  }; 
});

将 html 绑定到 angular-ui-bootstrap 手风琴

Bind html to angular-ui-bootstrap accordion

angularjs

angular-ui-bootstrap