我试图设置一个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. trusturl()现在工作时不会抛出错误。然而，它返回TrustedValueHolderType，我不知道如何使用它来插入一个实际的URL。无论我在属性src="{{trustUrl(currentProjectUrl))}}"的插值括号内使用$sce.trustUrl()，还是在控制器中设置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 );
}
我的问题似乎就这样解决了，尽管我不太确定原因。
请删除对trustSrc函数的调用，然后像这样重试。{{trustSrc(currentProject.url)}}到{{currentProject.url}}。
查看这个链接http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=preview
但是根据Angular Js 1.2文档，你应该写一个函数来获取src url。看看下面的代码。
之前:
Javascript
scope.baseUrl = 'page';
scope.a = 1;
scope.b = 2;
Html
<!-- Are a and b properly escaped here? Is baseUrl controlled by user? -->
<iframe src="{{baseUrl}}?a={{a}&b={{b}}"
但出于安全考虑，他们推荐以下方法
Javascript
var baseUrl = "page";
scope.getIframeSrc = function() {
// One should think about their particular case and sanitize accordingly
var qs = ["a", "b"].map(function(value, name) {
return encodeURIComponent(name) + "=" +
encodeURIComponent(value);
}).join("&");
// `baseUrl` isn't exposed to a user's control, so we don't have to worry about escaping it.
return baseUrl + "?" + qs;
};
Html
<iframe src="{{getIframeSrc()}}">
请删除对trustSrc函数的调用，然后像这样重试。{{trustSrc(currentProject.url)}}到{{currentProject.url}}。
查看这个链接http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=preview
但是根据Angular Js 1.2文档，你应该写一个函数来获取src url。看看下面的代码。
之前:
Javascript
scope.baseUrl = 'page';
scope.a = 1;
scope.b = 2;
Html
<!-- Are a and b properly escaped here? Is baseUrl controlled by user? -->
<iframe src="{{baseUrl}}?a={{a}&b={{b}}"
但出于安全考虑，他们推荐以下方法
Javascript
var baseUrl = "page";
scope.getIframeSrc = function() {
// One should think about their particular case and sanitize accordingly
var qs = ["a", "b"].map(function(value, name) {
return encodeURIComponent(name) + "=" +
encodeURIComponent(value);
}).join("&");
// `baseUrl` isn't exposed to a user's control, so we don't have to worry about escaping it.
return baseUrl + "?" + qs;
};
Html
<iframe src="{{getIframeSrc()}}">
选择模板;
Iframe控制器，ng模型更新
index . html
angularapp.controller('FieldCtrl', function ($scope, $sce) {
var iframeclass = '';
$scope.loadTemplate = function() {
if ($scope.template.length > 0) {
// add iframe classs
iframeclass = $scope.template.split('.')[0];
iframe.classList.add(iframeclass);
$scope.activeTemplate = $sce.trustAsResourceUrl($scope.template);
} else {
iframe.classList.remove(iframeclass);
};
};
});
// custom directive
angularapp.directive('myChange', function() {
return function(scope, element) {
element.bind('input', function() {
// the iframe function
iframe.contentWindow.update({
name: element[0].name,
value: element[0].value
});
});
};
});
iframe.html
window.update = function(data) {
$scope.$apply(function() {
$scope[data.name] = (data.value.length > 0) ? data.value: defaults[data.name];
});
};
查看这个链接:http://plnkr.co/edit/TGRj2o?p=preview
