AngularJS ng-bind-html不使用表达式
AngularJS是一种流行的前端开发框架，它提供了许多功能和指令来简化前端开发过程。其中一个常用的指令是ng-bind-html，它用于将HTML内容绑定到页面上的元素上。
ng-bind-html指令的作用是将一个字符串中的HTML代码解析并渲染到页面上。通常情况下，我们可以使用表达式来获取HTML字符串并将其绑定到元素上，例如：
<div ng-bind-html="htmlString"></div>在这个例子中，htmlString是一个包含HTML代码的字符串，ng-bind-html指令会将这个字符串解析并渲染到div元素中。
然而，在某些情况下，我们可能不想使用表达式来获取HTML字符串，而是希望直接将一个固定的HTML字符串绑定到元素上。这时可以使用ng-bind-html指令的另一种用法，即不使用表达式。例如：
<div ng-bind-html="'<p>这是一个固定的HTML字符串</p>'"></div>在这个例子中，我们直接将一个HTML字符串传递给ng-bind-html指令，它会将这个字符串解析并渲染到div元素中。
ng-bind-html指令的优势在于可以动态地将HTML内容渲染到页面上，使页面具有更强的交互性和可定制性。它适用于需要动态生成HTML内容的场景，例如在博客评论中显示用户输入的富文本内容、显示从后端获取的动态数据等。
对于腾讯云相关产品，推荐使用腾讯云的云服务器（CVM）来部署和运行AngularJS应用。腾讯云的云服务器提供了稳定可靠的计算资源，可以满足前端开发和后端开发的需求。您可以通过以下链接了解更多关于腾讯云云服务器的信息：
腾讯云云服务器产品介绍：https://cloud.tencent.com/product/cvm
希望以上信息能对您有所帮助！
相关·内容
我使用ng-bind-html如下所示
<p ng-bind-html="{{content.content}}">
</p>
但它并没有出现。但当我检查的时候，它们就在那里。怎么会这样?这不是css的问题。
浏览 0提问于2014-11-30得票数 1
我正在尝试计算ng-bind-html中的表达式，但它不起作用。如果有人知道解决此问题的方法，请提供帮助。 下面的代码没有显示任何内容。 <h5 ng-bind-html="{{feedType ==='popularProducts' ? displayedProduct.title : displayedProduct.name}}"></h5>
浏览 29提问于2020-01-01得票数 2
回答已采纳
我昨天启动了AngularJS，需要在一个大型抽象方面提供帮助。
因此，我的Controller.js中有一个多维数组：
var appname = angular.module('appname');
appname.controller('articleCollectionController', ['$scope', '$sce', function ($scope, $sce) {
$scope.news = [{
title: 'foobar breakthrough',
浏览 2提问于2015-05-28得票数 1
回答已采纳
请找到
我想要显示一些html预览。html已经在服务器上进行了清理(例如："<b>HELLO</b>")。如何显示html表单。在本例中，我希望显示myHtml的myHtml2 (第一次预览)。
html
<div ng-controller="myController">
<div ng-bind-html="myHtml"></div>
<div ng-bind-html="myHtml2">&l
浏览 2提问于2013-12-14得票数 1
3回答
在AngularJS中编译文本
、、、、
我有以下模板：
<h1 class="text-center" ng-bind-html="row.text"></h1>
如果我的row.text的内容是一个字符串，请说：
Hi your name is {{ name }}
它将展示：
Hi your name is {{ name }}
而不是实际的{{ name }}绑定。
我需要评估或编译这个row.text表达式吗？
浏览 2提问于2014-02-18得票数 3
回答已采纳
我正在用ng-bind-html显示angularjs变量
<div style="font-style:italic;font-size:18px">
"<span ng-bind-html="quote.body"></span>"
</div>
它在span之外使用引号进行解析，如下所示：
<div style="font-style:italic;font-size:18px">
"
<span ng-bind-html="quote
浏览 1提问于2015-01-11得票数 1
回答已采纳
我需要在ng-bind-html中使用表单标签吗？ng-bind-html不是绑定表单标记( form，input)。请提供绑定表单标签的解决方案。
浏览 4提问于2013-12-27得票数 0
更新:这是一个 。与我的观点/部分与问题i的直接链接。
我在我的AngularJS应用程序中使用一个JSON，它包含一个字符串中的$routeParams元素，当我使用$routeParams服务时，该字符串试图绑定到$routeParams。没有$routeParams服务，它就能工作，但是当我使用$routeParams服务时，它就不能工作了。有人知道为什么吗？
这是我的假设代码：
JSON在概要值中使用HTML元素提供示例：
[{
"title": "Canada",
"synopsis": "<p>Lo
浏览 3提问于2015-08-07得票数 1
回答已采纳
2回答
所以基本上我在页面上用ng-bind-html显示一些文本，因为文本由html元素组成，当你的鼠标悬停在它上面时，我有显示相同文本的要求。
我已经创建了css类，它将在悬停时显示相同的文本，但html标签作为文本到来。我找到了它说这是不可能的。
我使用的是angularjs，下面是html
<div ng-controller="foo">
<p class="ellipsis" ng-bind-html="bar" data-text="{{bar}}"></p>
</div&g
浏览 0提问于2018-09-26得票数 0
1回答
请考虑以下几点：
<span ng-bind-html="product.icon"></span>
如果product.icon包含：
<img src="http://localhost/angularjs/public/gfx/product/logo_1.png" width="18" height="18">
它会显示得很好。但是，如果它包含：
<img src="http://localhost/angularjs/public/gfx/product/logo_1.p
浏览 3提问于2015-02-19得票数 0
回答已采纳
我尝试在ng-repeat中使用带有对象属性的$sce.trustAsHtml()。结果是HTML是完全空白的。不过，HTML使用ngSanitize可以正确地输出。
<div ng-repeat="question in questions">
<p ng-bind-html="$sce.trustAsHtml(question.body)">
</p>
</div>
顺便说一下，我使用的是AngularJS v1.3.0-beta.3。不确定是有bug还是我做错了什么。
浏览 0提问于2014-06-28得票数 14
回答已采纳
1回答
我有一个具有动态字段的表单，它们是通过单击Add按钮添加的：
$scope.addField = function() {
$scope.fields.push($sce.trustAsHtml($('#form_fields').data('prototype')))
};
模板是这样的：
<ul>
<li ng-repeat="field in fields">
<div ng-bind-html="field"></di
浏览 4提问于2014-12-13得票数 0
我有作用域variable.like
$scope.demo='<h1>This is test</h1>';
我可以使用ng-bind-html绑定html，如下所示
<p ng-bind-html="demo"></p>
它工作得很好，但是如何在{{ .. }}中绑定html呢？
浏览 2提问于2015-08-28得票数 0
我试图将html绑定到div元素，但实际上不知道如何实现。我对angularjs不是很在行，但ng-bind-html是否应该这么做呢？
我就是这么做的，
<div ng-bind-html="{{tile.Info.Title}}"></div>
<div ng-bind-html="{{tile.Info.Content}}"></div>
在角度2它只是[innerHTML]，不能让它在这里工作，有什么建议吗？
浏览 3提问于2017-12-19得票数 0
回答已采纳
在我的应用程序中，我尝试连接两个字符串:电子邮件和一些文本。
但我遇到了麻烦，我需要可以翻译的文本部分，所以我写道：
$scope.textUnsubscribe = 'SUCESSFULL_UNSUBSCRIBE';
考虑到：
<h4 ng-bind-html="textUnsubscribe | translate"></h4>
当然我能做到(电邮+文本)：
<h4 ng-bind-html="userEmail"></h4>
<h4 ng-bind-html="textUnsub
浏览 0提问于2015-08-24得票数 3
回答已采纳
1回答
我有个设想。我为用户提供了一个评论框，用户可以在该框中添加新行的评论，如：
This is my comment.
Part of comment in new line
我将在数据库中保存如下：
model.Description = model.Comment.Replace("\n", "<br />");
//Insert into DB
现在，在AngularJs视图上显示它时，它显示的内容如下：
This is my comment. <br /> Part of comment in new line
**我的html：**
浏览 3提问于2015-09-04得票数 0
在我的视图表单中，我有以下表代码：
<table class ="table table-bordered">
<colgroup span="7"></colgroup>
<tbody>
<tr ng-repeat="tr in rows">
<td ng-repeat="td in tr track by $index">
<span ng-bind-html="td"></span>
浏览 1提问于2015-02-11得票数 3
回答已采纳
2回答
我有我的HTML字符串存储在我的数据库(我的新帖子的内容)。
我知道要在我的视图中打印这个html，我可以使用以下代码
<div ng-bind-html="post.content"></div>
这是非常好的，但是假设我只想打印已解析字符串的前20个字符。
有没有办法存储"ng-bind-html“的返回值和”只使用“过滤器？
有没有更好的方法在angular中创建摘录功能？
浏览 1提问于2015-11-08得票数 2
这是我的html：
<div ng-if="!item.edit>
<div class='door-description' ng-bind-html="item.Description"></div>
<div class='door-softvalues' ng-bind-html="item.SoftValues" ng-if="item.IsConfiguration"></div>
浏览 2提问于2016-07-19得票数 0
1回答
尝试使用ng-bind-html将iframe插入到AngularJS页面中&即使是最简单的形式，我也无法让它工作。
Javascript
function Ctrl($scope) {
$scope.showIt = '<iframe src="http://www.anything.com"></iframe>';
}
My：
<div ng-bind-html="showIt"></div>
浏览 2提问于2015-01-20得票数 2
回答已采纳
我正在使用angularjs 1.2.0-rc.3。我想动态地将html代码包含到模板中。为此，我在控制器中使用：
html = "<div>hello</div>";
$scope.unicTabContent = $sce.trustAsHtml(html);
在我得到的模板中：
<div id="unicTab" ng-bind-html="unicTabContent"></div>
它适用于普通的html代码。但是当我试图把角度模板，它没有解释，它只是包括在页面中。例如，我想包括：
<
浏览 3提问于2013-11-01得票数 53
回答已采纳
我希望在文本输入中找到链接，并在angularjs.Here中将它们转换为html链接，这是我的代码，但它不起作用。Html
<div class="item item-body" ng-bind-html="{{deal.notification_details}} | linky" >
</div>
controller.js
$scope.deal=[{id:'0',notification_details:'sample description http://www/example.com'}
浏览 4提问于2014-11-24得票数 1
回答已采纳
我有一个管理我所有UI选项卡的棱镜服务。它包含一个对象，它包含了我需要的关于一个选项卡的所有信息，比如图标、标签、URL等等。我有一个我的选项卡的用例，它上面有一个动态计数器，但是我不知道如何让它工作。
服务片段：
angular.module('app.services').service('tabService', function($rootScope, $route, $location) {
var tabs = {
"/front": {
"search": {
浏览 1提问于2017-05-05得票数 0
回答已采纳
我有以下标记：
<ul ng-if="item.children.length && item.open" class="fadeIn">
<li ng-repeat="child in item.children" ng-show="child.visible">
<a ng-href="#/{{ child.link }}">
<span ng-bind-html="child.title"
浏览 1提问于2015-07-25得票数 0
回答已采纳
我在响应中得到了HTML标记，我想要删除或解析它。
我得到的输出如下
<sometext>
但是我只想要输出
sometext
在视图中，我使用了以下代码
<div ng-bind-html="description"></div>
和在控制器中
$scope.description = '<sometext>';
浏览 2提问于2015-12-08得票数 0
回答已采纳
5回答
<h1>{{ revision.title }}</h1>
<div ng-bind-html="revision.content"></div>
标题输出得很好，但内容不太好。它有一些html，我得到了以下错误：Attempting to use an unsafe value in a safe context.，它被描述为：$sce:unsafe，这很好，但是我如何输出内容，因为其中会有一些html，所以我必须将它设置为{{ revision.content | safe }}或smthn。正确的方法是什么？
编辑：
An
浏览 15提问于2013-11-04得票数 28
回答已采纳
我使用ng-bind-html (带有ngSanitize模块)在视图中将html显示为纯文本。它绑定到作用域变量partyinfo。
<div class="panel panel-primary" ng-bind-html="partyinfo" contenteditable="false"></div>
如何在控制器端查看相同的作用域变量并转换为纯文本？有没有在控制器端做ng-bind-html的等效方法？
谢谢你的帮助。
浏览 3提问于2017-05-23得票数 0
我有一个场景，我想在ng-bind-html创建的DOM上运行一个自定义指令。
基本上，我必须定制html标记<a>的行为，因为加载的html是不安全的，当用户单击链接时，我必须在发生任何事情之前执行一些函数，也就是jqLite的click事件。
因此，我最初的想法是创建一个指令，它修改我放置指令属性的容器中任何<a>的行为。
这很好，直到我与ng-bind-html结合，我的指令在ng-bind-html将字符串编译成html并附加到DOM之前运行。
那么，在ng-bind-html运行之后有什么方法可以运行我的自定义指令呢？
浏览 1提问于2015-03-04得票数 3
回答已采纳
1回答
我正在尝试使用angularJS从ajax调用加载我的超文本标记语言的内容。我想有一个不同参数的单一方法，以改变ajax/REST uri，并在不同的组件中显示结果。(非运行版本)代码如下所示：
app.controller('ContentController', function($scope, $sce, $http) {
$scope.FetchContent = function(pageId) {
let contentUri = 'https://somewhere/restendpoint/?id=' + pageId;
$
浏览 10提问于2018-08-08得票数 0
回答已采纳
我试图使用在带有属性highlightReview的AngularJS服务中定义的名为ng-bind-html的转换函数，但无法使其工作。
关于样本，见下文：
function myReputationSrvc($http, $q, $log, $sce) {
this.highlightReview = function(text) {
return $sce.trustAsHtml(text);
}
}
然后在HTML中调用该函数，如下所示：
<span ng-bind-html = " MyReputationSrvc.highlightR
浏览 11提问于2017-09-18得票数 2
回答已采纳
在我的webiste中，用户可以插入这样的自定义标记：
<font color="#5780CD">Blueish</font>
我必须在我的AngularJS站点上展示它，并让它以这样的方式出现：
<font style="color: #5780CD !important">Blueish</font>
目前，我使用ng-bind-html来显示它们插入的标记，但是由于webiste中有其他样式应用于important，所以我必须在内联样式中添加一个!important。
我所做的就是创建这样一个自定义过滤器：
浏览 1提问于2018-09-17得票数 0
回答已采纳
我收到下一个字符串(应该是2行)：
commentBody:"row 1↵row 2"
我需要两行渲染。但不幸的是，在我的html代码中，它只在一行中呈现。
<div ng-if="!comment.openEdit" ng-bind-html="comment.commentBody" class="workItemCommentBody"></div>
浏览 4提问于2017-03-08得票数 0
回答已采纳
我有一个应用程序，需要HTML从不同的app拼凑在一起。我只想说，我们已经尝试了很多次，但最终最好的答案永远是我们现在所拥有的。希望有一天这种情况会有所改变，但就目前而言，效果很好。
目前，使用NodeJS将HTML解析为字符串服务器端，并将其作为要呈现的完整HTML发送到线路上。我正处于采用AngularJS的过程中，虽然我很喜欢它，但我还是被困在了这个问题上--我如何使用角度模板有时插入无效的HTML呢？
服务器将返回三个JSON字段：leadingHTML, trailingHTML, and copy。copy字段始终是有效的HTML，但是leadingHTML和trailingHTM
浏览 3提问于2014-03-09得票数 0
回答已采纳
我在ng-bind-html中有静态内容，如下所示
<div ng-bind-html="htmlContent">
<div>Static HTML</div>
</div>
但是当我在控制器内部更新模型时，内容被替换了。但我希望内容是附加的。有谁能告诉我如何做到这一点。
请参阅以下链接：
浏览 0提问于2016-04-18得票数 1
有一个包含产品描述的<ul> <li>..</li> </ul>标签。我使用了ngSanitize依赖，但它不起作用。我也尝试了ng-bind-html，$sce.trustAsHtml()，但它不工作。结果是将标记本身呈现为类似于<ul><li>something</li></ul>的字符串
我使用的是angular 1.4。
在浏览器控制台上，它打印如下：
<ul><li>Experience subject to availablity&
浏览 1提问于2015-12-07得票数 0
我想在引导表中显示一些文本。文本应该被解析为HTML，因为我需要<br/>-tags来显示彼此下面的所有不同的链接。请参阅我的代码中的柱塞。
如您所见，我使用了默认的ng-bind指令以及不推荐使用的ng-bind-html，但是文本要么显示为纯文本，要么根本不显示。
你们能告诉我如何显示被解析为HTML的文本吗？
这里是我的HTML表的代码：
<table class="table">
<thead>
<tr>
<th>Method</th>
<th>$sc
浏览 4提问于2016-08-11得票数 0
回答已采纳
1回答
我正在开发AngularJs中的应用程序
下面是我的代码：
HTML
<div ng-controller="MainController as main" class="containerWrap">
..
..
..
<p ng-bind-html="parseMsg(msg)"></p>
..
..
parseMsg函数将用户填写的消息传递给控制器JS，定义如下：
this.parseMsg=function(msg){
...
...
if(msg['subtype']==FIL
浏览 1提问于2015-02-25得票数 0
我得到这个错误是因为一个用户在他的帖子<3中添加了
错误：$sanitize:badparse消毒程序无法解析以下html块：<3
我写的代码是ng-bind-html ="Detail.details"
我只想把他带上<a>标签和<br />标签
这有可能吗？
谢谢!
浏览 5提问于2014-03-20得票数 8
回答已采纳
controller ：一旦用户选择了这两个选项，它应该在控制器内调用一个函数
<div class="col-lg-7">
<ui-select on-select="onSelectedFetchDD($item)" ng-model="ctrl.GetPlatformRegionName.selected" theme="selectize" ng-disabled="ctrl.disabled" title="Choose a GetPlatformRegionN
浏览 1提问于2017-08-08得票数 1
回答已采纳
如何在angularJS中限制ng-bind-html结果的字符数？有可能吗？
例如，在js文件中有<span>some text </span>，并使用$sce和ng-bind-html将其转换为html。
我想让som..看看。我怎么限制它呢？
浏览 1提问于2014-11-30得票数 6
我有一个AngularJS应用程序，我需要对字符串进行过滤(使用过滤器)以显示正确的HTML格式：
这是：
$scope.text = "This is <strong>GREAT</strong>";
需要：
这是伟大的
(以及其他HTML标记，如<br>等)
它应该通过过滤器工作，例如：
{{text | toHTML}}
我知道ng-bind-html，但我需要它通过过滤器工作，而不是使用ng-bind-html。
我发现了一些需要为每个步骤构造过滤器的例子(对于<a>有一个代码，对于<br>有另一个.)
浏览 7提问于2017-04-26得票数 0
回答已采纳
我想让这个简单的路由工作，但我不知道问题出在哪里。
这是HTML：
<html lang="en" ng-app="app">
.
.
.
<a href="#voip">
<div class="col-lg-3 service">
<img src="assets/img/voip.svg"/>
<h4 ng-bind-html="content.home.
浏览 7提问于2017-01-14得票数 3
回答已采纳
我对AngularJS还不熟悉，我觉得我只是在触及框架可能出现的问题。但是，我遇到了sce.trustAsHtml函数的问题。我正在运行AngularJS 1.2.4。
在我的应用程序中，我使用JSON加载项。使用指令将这些项显示在列表中。有时，我希望将HTML注入检索到的内容(例如，使链接可点击)。
我已经读到我可以使用$sce.trustAsHtml在绑定中允许html。但是，下面的代码段不起作用。我希望所有的项目都会被粗体的文本“test”所取代，但是它会显示每个项目的<strong>Test</strong>。
有什么简单的方法可以让这个片段发挥作用吗？
ang
浏览 4提问于2013-12-10得票数 2
回答已采纳
我想为每一件物品展示不同的描述。这是控制器：
todoApp.controller('todos',function($scope,todoFactory){
todoFactory.getTodos().success(function (data) {
courses = x2js.xml_str2json(data);
$scope.todos = courses.rss.channel.item;
for(var i = 0 ; i < $scope.todos.length ; i++){
浏览 2提问于2015-12-29得票数 1
回答已采纳
4回答
我尝试将AngularJs控制器中的一些HTML代码返回给html数据。
这是我的html的路径：
<div align="right">
{{chooseHtmlElement()}}">
</div>
这是我的AngularJs控制器的路径：
$scope.chooseHtmlElement= function () {
var sum = $scope.chiQuadSum();
if (isNaN(sum)) {
return "";
浏览 14提问于2015-10-22得票数 5
我正在过滤大约200个条目。JSONP文件来自我的服务器。这个应用程序非常慢，在安卓或iOS手机上打字几乎是不可能的。
我试图限制对track by item.storeName的使用，但这并没有帮助。
这是我的html：
<ion-view view-title="Open">
<ion-content class="bgstart">
<img src="img/logo.png" class="logo" alt="">
<h4 cla
浏览 3提问于2016-03-31得票数 0
回答已采纳
我希望使用AngularJS过滤器获取HTML的文本，但它似乎不适用于我的代码。
我的代码：
app.filter('unsafe', function($sce) {
return $sce.trustAsHtml;
});
app.filter('short', function() {
return function(short, length) {
return short.substr(0, length || 20)+'...';
}
});
我的模板：
<p ng-bind-html=&
浏览 6提问于2015-12-01得票数 1
回答已采纳
3回答
我有一个页面，它的源代码中有一些表格：
<td class="ng-binding">9:20 AM</td>,
<td class="ng-binding"><span class="ng-binding" ng-bind-html="objFlight.flight.statusMessage.text | unsafe">Scheduled</span> </td>,
<td class="ng-binding">1:05
浏览 1提问于2021-05-06得票数 0
我正在使用AngularJS和PhoneGap来创建一个移动应用程序。我有一个带锚标签的HTML，我使用ng-bind-html在屏幕上显示它。但是，当我触摸手机上的链接时，它根本不会打开网站。我的意图是在新的浏览器窗口中打开网站。我传递给ng-bind-html的字符串是："<a href=\"#\" onclick=\"window.open('http://www.google.com', '_system');\">www.google.com</a>";
另外，我正在使用InApp
浏览 5提问于2014-09-19得票数 0
当我将范围变量附加到div时，它会显示html标记。试着解决它。
控制器
$scope.homeBox = response.data[$item];
<div ng-bind="homeBox" ng-bind-html="myService.body | limitTo: limit"></div>
这将显示以下内容
浏览 20提问于2016-08-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
