[解決済み] AngularJSでiframeのsrc属性を変数から設定する方法

質問

を設定しようとしています。 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>

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

    }
}

このコードでは、何もiframeの src 属性を使用します。空白になるだけです。

アップデート1: を注入してみました。 $sce の依存性をAppCtrlに追加し、$sce.trustUrl()がエラーを投げずに動作するようになりました。しかし、それは TrustedValueHolderType これは、実際のURLを挿入するためにどのように使用したらよいかわかりません。属性内の中括弧の中で $sce.trustUrl() を使用しても、同じ型が返されます。 src="{{trustUrl(currentProjectUrl))}}" または、コントローラ内でcurrentProjectUrlの値を設定する際に行う場合です。両方で試したこともあります。

更新2: .toString()を使ってtrustedUrlHolderからurlを返す方法がわかったのですが、それをsrc属性に渡そうとするとセキュリティ警告が出ます。

アップデート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 );

}

私の問題はこれで解決したようです、理由はよく分かりませんが。

解決方法は？

抜粋を見る限りでは、関数 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>