是否可以在AngularJS控制器中创建HTML片段并在视图中显示此HTML？
这需要将不一致的JSON blob转换为嵌套的id : value对列表.因此,HTML是在控制器中创建的,我现在希望显示它.
我创建了一个模型属性,但是如果不打印HTML,则无法在视图中呈现它.
更新
似乎问题来自角度渲染创建的HTML作为引号内的字符串.将试图找到解决这个问题的方法.
示例控制器:
var SomeController = function () {
this.customHtml = '<ul><li>render me please</li></ul>';
}
示例视图:
<div ng:bind="customHtml"></div>
给:
<div>
"<ul><li>render me please</li></ul>"
</div>
我正在尝试使用$sanitizeprovider和ng-bind-htm-unsafe指令允许我的控制器将HTML注入DIV.
但是,我无法让它发挥作用.
<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>
我发现它是因为它从AngularJS中删除了(谢谢).
但没有ng-bind-html-unsafe,我得到这个错误:
这是我的模板:
<div class="span12">
<ng:view></ng:view>
</div>
这是我的视图模板:
<h1>{{stuff.title}}</h1>
{{stuff.content}}
我得到了contenthtml,我想在视图中显示,但我得到的只是原始的HTML代码.我该如何呈现该HTML？
我想将带有自定义样式的html字符串绑定到DOM.但是ngSanitize从字符串中删除样式.
例如:
在控制器中:
$scope.htmlString = "<span style='color: #89a000'>123</span>!";
在DOM中:
<div data-ng-bind-html="htmlString"></div>
将省略style属性.结果如下:
<div data-ng-bind-html="htmlString"><span>123</span>!</div>
代替:
<div data-ng-bind-html="htmlString"><span style='color: #89a000'>123</span>!</div>
问题:我怎样才能做到这一点？
如何显示 空格而不是字符串.raw在树枝上有过滤器吗？
<div>{{item}}</div>
$scope.item = ' ';
但结果是逃脱的&nbsp;.我需要这个因为' '高度为0.
我在客户端使用Angular(1.2 RC2)开发CMS驱动的网站.由于内容来自CMS,我很遗憾不得不在JSON字符串中使用接收HTML.大多数HTML都被注入并渲染得很好,但是图像标签的src被剥离了.根据我的阅读,src应该以"unsafe:"为前缀,如果这是Angular中的XSS安全问题,则不会完全删除..但我可能会弄错.
我已经在这个问题上待了一段时间,感觉我已经尝试了从合理到彻头彻尾的愚蠢的一切.将我的CMS网址列入白名单,将所有内容列入白名单,禁用$ sce,强制html通过$ sce.trustAsHtml()并且好......到目前为止,没有运气.由于该网站是由CMS驱动的,我不幸的是不能创造一个掠夺/小提琴,但我希望善良的灵魂无论如何都会尝试帮助.
更新:忘记提及我也尝试过ng-src,效果相同. 更新II:如果我使用HTTPS,src属性仍然存在并显示图像.这是可以接受的,因为它将在生产中运行HTTPS,但我仍然想知道为什么禁用$ sce不起作用.
浏览器看到的HTML(slide.body的内容)
<div class="row">
<div class="col-md-6 visible-md visible-lg">
<img alt="none" class="img-responsive">
</div>
<div class="col-xs-12 col-md-6">
<div class="itx-article-header">
<h1>Sulvat Quis 1</h1>
<h2>– Nullam dictum ac enim</h2>
</div>
<p>Proin quis justo vel felis varius sodales sit amet ut diam.</p>
</div>
</div>
JADE(HTML)
.my-carousel(ng-controller='CarouselCtrl')
carousel(interval='myInterval')
slide(ng-repeat='slide in slides', active='slide.active')
.my-carousel-item(ng-bind-html='slide.body')
角度控制器
.controller('CarouselCtrl', ['$sce', 'Article', '$scope',
function($sce, Article, $scope) {
$scope.myInterval = -1;
$scope.slides = Article.query(
{category: 'carousel'}, …关于ng-bind-html将Angular应用程序从1.0.8升级到1.2.8的问题:
我将语言环境字符串存储在名为en_GB.json,fr_FR.json等的文件中.到目前为止,我已允许在语言环境字符串中使用HTML,以允许团队编写本地化内容以应用基本样式或添加内联锚标记.这将导致以下示例JSON:
{
"changesLater": "<strong>Don't forget</strong> that you can always make changes later."
"errorEmailExists": "That email address already exists, please <a href=\"login\">sign in</a> to continue."
}
当使用这些字符串时ng-bind-html="myStr",我明白我现在需要使用$sce.trustAsHtml(myStr).我甚至可以按照这个StackOverflow应答中的建议编写一个过滤器,这将导致使用ng-bind-html="myStr | unsafe".
我有这样一个简单的演示文稿
<div id="{{item.id}}" ng-repeat="item in itemList">
<div ng-bind-html="item.html"></div>
</div>
item.html包含这样的html:
<a href="http://www.youtube.com"><img src="icons/youtube.png" alt="Youtube"/></a>
但是,生成的html不会加载图像:
<a href="http://www.youtube.com"><img alt="Youtube"/></a>
经过一些搜索,看起来像angularjs这样做是为了避免跨站点脚本,但我能够直接从youtube加载图像.
<a href="http://www.youtube.com"><img src="http://img.youtube.com/vi/9bZkp7q19f0/0.jpg" alt="Youtube"/></a>
此外,我能够使用ng-bind-html-unsafe加载所有图像.
<div id="{{item.id}}" ng-repeat="item in itemList">
<div ng-bind-html-unsafe="item.html"></div>
</div>
如果我使用ng-bind-html-unsafe,我不再需要ngSanitize模块,这意味着我的代码不太安全？我确实有用例从外部源加载图像.
来到我的问题:
除了上面提到的内容之外,ng-bind-html和ng-bind-html-unsafe有什么区别.有没有关于此的文件？我找不到任何东西.
如何从主机服务器和外部服务器加载图像,而不必使用unsafe指令？
谢谢!
我正在开发一个使用AngularJS的应用程序.我的控制器看起来像这样:
function TestCtrl($scope) {
$scope.lines = 'var x=1;\nvar y=2;';
}
我的观点如下:
<div ng-controller="TestCtrl">
<p>
Output:<br />
<code>{{lines}}</code>
</p>
</div>
呈现视图时,值$scope.lines将在单行上呈现,如下所示:
var x=1; var y=2;
但是,我想将其显示为:
var x=1;
var y=2;
我究竟做错了什么？我试着开关\n用<br />,但是,也不能工作.