我正在尝试从变量设置iframe的src属性，但我无法让它工作……
标记：
<div class="col-xs-12" ng-controller="AppCtrl">
<ul class="">
<li ng-repeat="project in projects">
<a ng-click="setProject(project.id)" href="">{{project.url}}</a>
</li>
</ul>
<iframe ng-src="{{trustSrc(currentProject.url)}}">
Something wrong...
</iframe>
</div>
控制器/app. js：
function AppCtrl ($scope) {
$scope.projects = {
1 : {
"id" : 1,
"name" : "Mela Sarkar",
"url" : "http://blabla.com",
"description" : "A professional portfolio site for McGill University professor Mela Sarkar."
},
2 : {
"id" : 2,
"name" : "Good Watching",
"url" : "http://goodwatching.com",
"description" : "Weekend experiment to help my mom decide what to watch."
}
};
$scope.setProject = function (id) {
$scope.currentProject = $scope.projects[id];
console.log( $scope.currentProject );
}
}
使用此代码，没有任何内容插入到iframe的src属性中。它只是空白。
更新1：我将$sce依赖注入到AppCtrl中，$sce.信任Url（）现在可以正常工作而不会引发错误。但是它返回TrustedValueHolderType，我不确定如何使用它来插入实际的URL。无论我在属性src="{{信任Url（当前ProjectUrl))}}"的插值括号内使用$sce.信任Url（）还是在设置当前ProjectUrl的值时在控制器内使用它，都会返回相同的类型。我甚至尝试了两者。
更新2：我想出了如何使用. toString（）从受信任的UrlHolder返回url，但当我这样做时，当我尝试将其传递给src属性时，它会抛出安全警告。
更新3：如果我在控制器中使用信任AsResourceUrl（）并将其传递给ng-src属性中使用的变量，它就可以工作：
$scope.setProject = function (id) {
$scope.currentProject = $scope.projects[id];
$scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
console.log( $scope.currentProject );
console.log( $scope.currentProjectUrl );
}
我的问题似乎就这样解决了，尽管我不太确定为什么。
我怀疑看摘录的信任Src函数信任Src没有在控制器中定义。
您需要在控制器中注入$sce服务，并将url注入url。
在控制器中：
function AppCtrl($scope, $sce) {
// ...
$scope.setProject = function (id) {
$scope.currentProject = $scope.projects[id];
$scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
}
}
在模板中：
<iframe ng-src="{{currentProjectUrl}}"> <!--content--> </iframe>
它是阻止带有外部域的URL的$sce服务，它是为AngularJS提供严格上下文转义服务的服务，以防止安全漏洞，如XSS，点击劫持等，它在Angular 1.2中默认启用。
您可以完全禁用它，但不推荐
angular.module('myAppWithSceDisabledmyApp', [])
.config(function($sceProvider) {
$sceProvider.enabled(false);
});
更多信息https://docs.angularjs.org/api/ng/service/$sce
我遵循这种方式，它对我很好，愿它对你有效，
<iframe class="img-responsive" src="{{pdfLoc| trustThisUrl }}" ng-style="{
height: iframeHeight * 0.75 + 'px'
}" style="width:100%"></iframe>
这里信任ThisUrl只是过滤器，
angular.module("app").filter('trustThisUrl', ["$sce", function ($sce) {
return function (val) {
return $sce.trustAsResourceUrl(val);
};
}]);
