我无法将字符串绑定到angular js中的html元素 [英] I can't bind string to html element in angular js
问题描述
对不起,我是ionic(angularjs)的新手.我尝试从字符串进行绑定,该字符串包含youtub视频网址.
< iframe宽度="280" height ="150" src ="//www.youtube.com/embed/UAHEQnOtzuw?list=UUj4nCgtjKJppK_IZeY8TUJg" frameborder ="0" allowfullscreen></iframe>
在控制器中
$ scope.videoElement.str = $ scope.item.restData.videos [0] .link;
在html中
< div ng-bind-html ="videoElement.str"></div>
但是我什么都看不到.:(
这是屏幕截图. http://screencast.com/t/Fgct1sdnOon
如何解决此问题?谢谢你的进步.
除非使用 $ sce
,否则链接不会附加到div.继续使用 iframe
并将网址作为字符串嵌入为:
< iframe宽度="280" height ="150" ng-src ="{{videoElement.str}}" frameborder ="0" allowfullscreen></iframe>
>
如果您仍然需要将iframe绑定到div,则可能可以通过以下方式实现:
控制器:
$ scope.frame ='< iframe src ='+ $ scope.videoElement.str +'"></iframe>';;
查看:
< div ng-bind-html ="frame | safeHtml">
safeHtml是用于安全绑定html的过滤器指令,并使用 $ sce
-
此外,如上所述,在app.js或控制器末端之后添加 safeHtml
指令.
I am sorry, i am new on ionic(angularjs). I have tried to bind from string, the string is containing youtub video url.
<iframe width="280" height="150" src="//www.youtube.com/embed/UAHEQnOtzuw?list=UUj4nCgtjKJppK_IZeY8TUJg" frameborder="0" allowfullscreen></iframe>
In controller
$scope.videoElement.str = $scope.item.restData.videos[0].link;
In html
<div ng-bind-html="videoElement.str"></div>
but i can't see nothing. :(
Here is screenshot. http://screencast.com/t/Fgct1sdnOon
How can i fix this issue? Thank you for an advance.
A link would not append to a div unless you make use of $sce
.
Keep using the iframe
and embed the url as string as:
<iframe width="280" height="150" ng-src="{{videoElement.str}}" frameborder="0" allowfullscreen></iframe>
If you still need to bind the iframe to a div then this is probably how you can achieve it:
Controller:
$scope.frame= '<iframe src="' + $scope.videoElement.str + '"></iframe>';
View:
<div ng-bind-html="frame| safeHtml">
Where safeHtml is a filter directive to safely bind the html and makes use of $sce
- Documentation
Include this in the app:
app.filter('safeHtml', function ($sce) {
return function (val) {
return $sce.trustAsHtml(val);
};
});
UPDATE:
If $scope.videoElement.str
is the Iframe link, then the below code would suffice as:
<div ng-bind-html="videoElement.str | safeHtml">
Also, add the safeHtml
directive as mentioned above in the app.js or after the end of controller.
这篇关于我无法将字符串绑定到angular js中的html元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!