我正在学习使用MEAN全栈,并遇到了一个我无法找到解决方案的问题。
使用ng-repeat迭代JSON对象可以很好地工作,但是在第三列中使用x.url变量根本不会起作用。 URL在第二列中正确打印。
我如何引用iframe中的x.url变量?
谢谢。
<div class="jumbotron text-center">
<table class='table table-bordered'>
<caption>LIST OF ALL SONGS</caption>
<thead>{{ tagline }}</thead>
<tr ng-repeat="x in songs">
<td>{{x.name}}</td>
<td>{{x.url}}</td>
<td><iframe width="560" height="315" src={{x.url}} frameborder="0" allowfullscreen></iframe></td>
</tr>
</table>
</div>
答案 0 :(得分:2)
大多数绑定使用$sce
来清理元素并保护您免受可能不安全的内容的侵害,如果您信任该URL,则可以使用$ sce来明确信任它
http://plnkr.co/edit/hJw5JWsteFBfiHH5d3QS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $sce) {
$scope.tagline = "test"
$scope.songs = [{url: $sce.trustAsResourceUrl('http://angularjs.org'), name: 'test'}];
});
如果您信任该内容,也可以完全停用$sce
,但来自用户的任何内容都应被视为不安全