如何从 AngularJS 中的变量设置 iframe src 属性 [英] How to set an iframe src attribute from a variable in AngularJS

查看：32
本文介绍了如何从 AngularJS 中的变量设置 iframe src 属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试从变量设置 iframe 的 src 属性，但我无法让它工作...

标记:

<ul class=""><li ng-repeat="项目中的项目"><a ng-click="setProject(project.id)" href="">{{project.url}}</a><iframe ng-src="{{trustSrc(currentProject.url)}}">有问题...</iframe>

控制器/app.js:

function AppCtrl ($scope) {$scope.projects = {1:{身份证":1，"name" : "梅拉萨卡","url": "http://blabla.com",描述":麦吉尔大学教授梅拉萨卡尔的专业作品集网站."},2:{身份证":2，"name" : "好看","url": "http://goodwatching.com",描述":周末实验，帮助我妈妈决定看什么."}};$scope.setProject = 函数 (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() 从 trustUrlHolder 返回 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(currentProject.url) 中的函数 trustSrc 的摘录不是控制器中定义.

您需要注入 $sce 服务在控制器和 trustAsResourceUrl 中的 url 那里.

在控制器中:

function AppCtrl($scope, $sce) {//...$scope.setProject = 函数 (id) {$scope.currentProject = $scope.projects[id];$scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);}}

在模板中: