I'm trying to set the src
attribute of an iframe from a variable and I can't get it to work...
(我正在尝试从变量设置iframe的src
属性,我无法让它工作......)
The markup:
(标记:)
<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>
controllers/app.js:
(控制器/ 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 );
}
}
With this code, nothing gets inserted into the iframe's src
attribute.
(使用此代码,不会将任何内容插入到iframe的src
属性中。)
It's just blank.(它只是空白。)
Update 1: I injected the $sce
dependancy into the AppCtrl and $sce.trustUrl() now works without throwing errors.
(更新1:我将$sce
依赖注入AppCtrl,$ sce.trustUrl()现在可以正常工作而不会抛出错误。)
However it returns TrustedValueHolderType
which I'm not sure how to use to insert an actual URL.(但是它返回TrustedValueHolderType
,我不确定如何使用它来插入实际的URL。)
The same type is returned whether I use $sce.trustUrl() inside the interpolation braces in the attribute src="{{trustUrl(currentProjectUrl))}}"
or if I do it inside the controller when setting the value of currentProjectUrl.(无论我在属性src="{{trustUrl(currentProjectUrl))}}"
的插值括号内使用$ sce.trustUrl(),还是在设置currentProjectUrl的值时在控制器内执行,都会返回相同的类型。)
I even tried it with both.(我甚至试过两个。)
Update 2: I figured out how to return the url from the trustedUrlHolder using .toString() but when I do that, it throws the security warning when I try to pass it into the src attribute.
(更新2:我想出了如何使用.toString()从trustedUrlHolder返回url,但是当我这样做时,它会在我尝试将其传递给src属性时抛出安全警告。)
Update 3: It works if I use trustAsResourceUrl() in the controller and pass that to a variable used inside the ng-src attribute:
(更新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 );
}
My problem seems to be solved by this, although I'm not quite sure why.
(我的问题似乎已经解决了,虽然我不太清楚为什么。)
ask by emersonthis translate from so