我正在尝试src
从变量设置iframe 的属性,但无法正常使用...
标记:
<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.trustUrl()现在可以正常运行而不会引发错误。但是,它返回的TrustedValueHolderType
是我不确定如何用于插入实际URL的返回值。无论是在属性的插值括号内使用$ sce.trustUrl()src="{{trustUrl(currentProjectUrl))}}"
还是在设置currentProjectUrl的值时在控制器内部执行此操作,都会返回相同的类型。我什至都尝试过。
更新2: 我想出了如何使用.toString()从TrustedUrlHolder返回url,但是当我这样做时,当我尝试将其传递到src属性时,它将引发安全警告。
更新3: 如果我在控制器中使用trustAsResourceUrl()并将其传递给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 );
}
我的问题似乎可以通过此方法解决,尽管我不太确定为什么。