javascript - 如何从AngularJS中的变量设置iframe src属性(How to set an iframe src attribute from a variable in AngularJS)

Question

I'm trying to set the src attribute of an iframe from a variable and I can't get it to work...

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

The markup:

(标记：)

<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>

controllers/app.js:

(控制器/ 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 );

    }
}

With this code, nothing gets inserted into the iframe's src attribute.

(使用此代码，不会将任何内容插入到iframe的src属性中。)

It's just blank.

(它只是空白。)

Update 1: I injected the $sce dependancy into the AppCtrl and $sce.trustUrl() now works without throwing errors.

(更新1：我将$sce依赖注入AppCtrl，$ sce.trustUrl（）现在可以正常工作而不会抛出错误。)

However it returns TrustedValueHolderType which I'm not sure how to use to insert an actual URL.

(但是它返回TrustedValueHolderType ，我不确定如何使用它来插入实际的URL。)

The same type is returned whether I use $sce.trustUrl() inside the interpolation braces in the attribute src="{{trustUrl(currentProjectUrl))}}" or if I do it inside the controller when setting the value of currentProjectUrl.

(无论我在属性src="{{trustUrl(currentProjectUrl))}}"的插值括号内使用$ sce.trustUrl（），还是在设置currentProjectUrl的值时在控制器内执行，都会返回相同的类型。)

I even tried it with both.

(我甚至试过两个。)

Update 2: I figured out how to return the url from the trustedUrlHolder using .toString() but when I do that, it throws the security warning when I try to pass it into the src attribute.

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

Update 3: It works if I use trustAsResourceUrl() in the controller and pass that to a variable used inside the ng-src attribute:

(更新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 );

}

My problem seems to be solved by this, although I'm not quite sure why.

(我的问题似乎已经解决了，虽然我不太清楚为什么。)

  ask by emersonthis translate from so

Answer 1

I suspect looking at the excerpt that the function trustSrc from trustSrc(currentProject.url) is not defined in the controller.

(我怀疑看到来自trustSrc(currentProject.url)的函数trustSrc未在控制器中定义的摘录。)

You need to inject the $sce service in the controller and trustAsResourceUrl the url there.

(你需要在控制器中注入$sce服务 ，并在那里注入trustAsResourceUrl url 。)

In the controller:

(在控制器中：)

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

In the Template:

(在模板中：)

<iframe ng-src="{{currentProjectUrl}}"> <!--content--> </iframe>