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

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

我想把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属性。只是一片空白。

更新1:我注射了$sce现在,AppCtrl和$sce.TrustUrl()中的依赖关系可以正常工作,而不会引发错误。不管怎么回事TrustedValueHolderType我不知道如何插入一个实际的URL。如果在属性的内插大括号中使用$sce.TrustUrl(),则返回相同的类型。src="{{trustUrl(currentProjectUrl))}}"或者在设置currentProjectUrl值时,在控制器内执行此操作。我甚至都试过了。

更新2:我知道了如何使用.toString()从受托人UrlHolder返回url,但是当我这样做时,当我试图将它传递到src属性时,它会抛出安全警告。

更新3:如果在控制器中使用信任AsResourceUrl()并将其传递给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 );}

我的问题似乎通过这个解决了,虽然我不太清楚为什么。



九州编程
浏览 337回答 3
3回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript