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

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

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>

我会如何做到这样？谢谢。

来源

2015-02-23 Hendrik

你能告诉我们指令码吗？也许你错过了transclude？ – Kinnza 2015-02-23 13:59:40

我认为Ionic从ui.router包中获取它。它的文档可以在这里找到：https：//github.com/angular-ui/ui-router#nested-states--views。希望有所帮助。 – Hendrik 2015-02-23 14:08:26

你使用离子框架角度支持http://ionicframework.com/docs/api/？你试图使用哪个组件？ – Kinnza 2015-02-23 14:15:51

我不确定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 -->

希望它帮助！

来源

2015-02-23 16:33:02

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

回答

相关问题