Как установить атрибут iframe src из переменной в AngularJS
Я пытаюсь установить 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>
контроллеры/приложение.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 );
}
}
С помощью этого кода ничто не вставляется в. Он просто пустой.
обновление 1:
Я ввел $sce
зависимость в AppCtrl и $sce.trustUrl () теперь работает без ошибок. Однако он возвращается TrustedValueHolderType
что я не уверен, как использовать для вставки фактического URL-адреса. Тот же тип возвращается, использую ли я $sce.trustUrl () внутри фигурных скобок интерполяции в атрибуте src="{{trustUrl(currentProjectUrl))}}"
или если я делаю это внутри контроллера при установке значения currentProjectUrl. Я даже попробовал с обоими.
обновление 2: Я понял, как вернуть url-адрес из trustedUrlHolder с помощью.toString () но когда я это делаю, он выдает предупреждение безопасности, когда я пытаюсь передать его в 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 );
}
моя проблема, кажется, решена, хотя я не совсем уверен, почему.
5 ответов
Я подозреваю, глядя на отрывок, что функция trustSrc
С trustSrc(currentProject.url)
не определено в контроллере.
вам нужно впрыснуть $sce
сервис в контроллере и trustAsResourceUrl
на 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>
это служба $sce, которая блокирует URL-адреса с внешними доменами, это служба, которая предоставляет строгие контекстные экранирующие службы AngularJS, чтобы предотвратить уязвимости безопасности, такие как XSS, clickjacking и т. д. он включен по умолчанию в Angular 1.2.
вы можете отключить его полностью, но это не рекомендуется
angular.module('myAppWithSceDisabledmyApp', [])
.config(function($sceProvider) {
$sceProvider.enabled(false);
});
подробнее https://docs.angularjs.org/api/ng/service/ $sce
Пожалуйста, удалите вызов 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 class="img-responsive" src="{{pdfLoc| trustThisUrl }}" ng-style="{
height: iframeHeight * 0.75 + 'px'
}" style="width:100%"></iframe>
здесь trustThisUrl - это просто фильтр,
angular.module("app").filter('trustThisUrl', ["$sce", function ($sce) {
return function (val) {
return $sce.trustAsResourceUrl(val);
};
}]);
выбрать шаблон; контроллер iframe, обновление модели ng
.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