如何从AngularJS中的变量设置iframe src属性

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试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属性。它只是空白。

我将$sce依赖项注入到AppCtrl中，并且$

sce.trustUrl（）现在可以正常运行而不会引发错误。但是，它返回的TrustedValueHolderType是我不确定如何用于插入实际URL的返回值。无论是在属性的插值括号内使用$

sce.trustUrl（）src="{{trustUrl(currentProjectUrl))}}"还是在设置currentProjectUrl的值时在控制器内部执行此操作，都会返回相同的类型。我什至都尝试过。

我想出了如何使用.toString（）从TrustedUrlHolder返回url，但是当我这样做时，当我尝试将其传递到src属性时，它将引发安全警告。

如果我在控制器中使用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)没有在控制器中定义。

您需要将$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>

以上是 如何从AngularJS中的变量设置iframe src属性 的全部内容， 来源链接： utcz.com/qa/400959.html

回到顶部