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

问题描述

我想从一个变量设置一个iframe的的src 属性，我无法得到它的工作...

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

的标记：

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

controllers/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 );

    }
}

有了这个code，没有东西插入iframe的的src 属性。这只是空白。

更新1：
我注射了 $ SCE 依赖关系到AppCtrl和$ sce.trustUrl（）现在工作未抛出错误。然而，它返回 TrustedValueHolderType 这我不知道如何使用插入一个实际的URL。同一类型的返回我是否使用插值括号内$ sce.trustUrl（）在属性 SRC ={{trustUrl（currentProjectUrl））}}或者如果我做控制器内部设置currentProjectUrl的价值时。我甚至与两个试了一下。

Update 1: I injected the $sce dependancy into the AppCtrl and $sce.trustUrl() now works without throwing errors. However it returns TrustedValueHolderType which I'm not sure how to use to insert an actual 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. I even tried it with both.

更新2：
我想通了如何从trustedUrlHolder使用的ToString（）返回的网址，但是当我做到这一点，当我试图把它传递到src属性引发安全警告。

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.

更新3：
它的工作原理，如果我在控制器使用trustAsResourceUrl（），并传递到NG-src属性内使用一个变量：

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

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

推荐答案

我怀疑看摘录功能 trustSrc 从 trustSrc（currentProject .URL）未在控制器中定义。

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

您需要注入的 $ SCE 服务在控制器和 trustAsResourceUrl 的网​​址那里。

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

在控制器：

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

在模板：

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

这篇关于如何从AngularJS变量设置一个iframe src属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！