Question

我正在尝试渲染一个指令，并使用AngularJS在HTML中正确显示它。我有一个服务，负责向用户显示警告消息。每个控制器我可以调用此服务并设置我想要显示的消息。现在其中一条消息应该包含一个链接。但是，当我使用Ionic框架时，我需要使用一个指令来完成它。

HTML:
<div class="bar bar-loading bar-assertive top-bar">
  | {{ message }}
</div>

JS:
$scope.message = "Please visit this link: <a ui-sref='app.settings.profile-show'>Open me.</a>"

然而，在html中没有正确输出消息。如果我使用以下内容，我会得到html，但不会评估该指令：

<div class="bar bar-loading bar-assertive top-bar" ng-bind-html="message"></div>

我将如何完成这样的事情？谢谢。

Answer 1

我不确定Ionic框架，但这是我呈现HTML内容的方式。使用$ sce.trustAsHtml（html）将文本呈现为html。您的代码看起来像这样。

// ... 
app.controller('yourCtrl', function ($scope,$sce) {
    $scope.message = "Please visit this link: <a ui sref='app.settings.profile-show'>Open me.</a>";
    $scope.renderHTML = function(html_code){
        return $sce.trustAsHtml(html_code);
    };
}

HTML

<div class="bar bar-loading bar-assertive top-bar" ng-bind-html="renderHTML(message)"></div>
<!-- or this way? -->
<div class="bar bar-loading bar-assertive top-bar">
    | {{ renderHTML(message) }}
</div>
<!-- not sure about second option, but either should work -->

希望它有所帮助！

使用AngularJS在html字符串中渲染指令

1 个答案: