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

Question

我正在尝试从变量中设置 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>

Controller /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 依赖项注入(inject) AppCtrl 和 $sce.trustUrl() 现在可以正常工作而不会引发错误。但是它返回 TrustedValueHolderType 我不确定如何使用它来插入实际的 URL。无论我在属性 src="{{trustUrl(currentProjectUrl))}}" 的插值括号内使用 $sce.trustUrl() 还是在 Controller 内部执行此操作时，都会返回相同的类型设置 currentProjectUrl 的值。我什至都试过了。

更新 2: 我想出了如何使用 .toString() 从trustedUrlHolder 返回url，但是当我这样做时，当我尝试将它传递给src 属性时它会引发安全警告。

更新 3: 如果我在 Controller 中使用 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 );

}

我的问题似乎由此解决了，虽然我不太清楚为什么。

Answer 1

我怀疑查看 trustSrc(currentProject.url) 中的函数 trustSrc 未在 Controller 中定义的摘录。

您需要注入(inject) $sce service在 Controller 和 trustAsResourceUrl 中的 url 那里。

在 Controller 中:

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>