Question

我尝试通过AngularJS动态地将网址加载到iframe中。出于某种原因，我无法在this fiddle中看到。有人可以告诉我我做错了什么吗？为什么我不能绑定到控制器中设置的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服务用作recommended in this post。如果您这样做，最终会得到以下结果：

<强> 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绝对无效 - 它只是尝试在当前页面内加载变量的名称。希望这将有助于将来尝试删除大括号的其他人！

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

1 个答案: