无法通过AngularJS控制器将URL加载到iframe中

Question

我正在尝试通过AngularJS动态地将URL加载到iframe中.出于某种原因,我不能在这个小提琴中表现出来.有人可以告诉我我做错了什么吗？为什么我无法绑定到控制器中设置的URL？代码非常小:

<div ng-app ng-controller="LoginController">
    <div>Trying to load {{ customUrl }}</div>
    <div><iframe ng-src="{{trustSrc(customUrl)}}" height="480" width="640"></iframe></div>
</div>

function LoginController($scope) {
    $scope.customUrl = 'http://www.google.com/custom';
}

谢谢!

Answer 1

您的代码无法正常工作的原因是因为源不受信任.为了使源可信,您需要$sce按照本文中的建议使用该服务.如果您这样做,最终会得到以下结果:

HTML

<div><iframe ng-src="{{customUrl}}" height="480" width="640"></iframe></div>

调节器

function LoginController($scope, $sce) {
    $scope.customUrl = $sce.trustAsResourceUrl('http://www.cnn.com');   
}

查看更新的小提琴:http://jsfiddle.net/W4WyL/4/

编辑 - 我的原始答案说要删除花括号.这完全是错误的.需要花括号ng-src才能实际评估url.这似乎起作用的原因是因为作为模板一部分的代码是隐式信任而变量不是.也就是说,url绝对无效 - 它只是尝试在当前页面内加载变量的名称.希望这将有助于将来尝试去除花括号的其他人!