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>
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 );
}
私の問題はこれで解決したようですが、理由はよくわかりません。