角度jsのhtml要素に文字列をバインドできません

Question

申し訳ありませんが、私はionic（angularjs）の新機能です。私は文字列からバインドしようとしましたが、文字列にyoutub video urlが含まれています。 HTML

<div ng-bind-html="videoElement.str"></div> 

で

<iframe width="280" height="150" src="//www.youtube.com/embed/UAHEQnOtzuw?list=UUj4nCgtjKJppK_IZeY8TUJg" frameborder="0" allowfullscreen></iframe> 

コントローラで

$scope.videoElement.str = $scope.item.restData.videos[0].link; 

しかし、私は何も見ることはできません。 :(ここ

スクリーンショットです。http://screencast.com/t/Fgct1sdnOon

私はこの問題を解決することができますか？事前いただきありがとうございます。あなたは$sceを利用していない限り

Answer 1

リンクはdiv要素に追加しません。 使用してくださいiframeとして文字列としてのURLを埋め込む：あなたはまだDIVその後、THIにはiframeをバインドする必要がある場合は

<iframe width="280" height="150" ng-src="{{videoElement.str}}" frameborder="0" allowfullscreen></iframe>

Sは、あなたがそれを達成することができますどのように、おそらくです：

コントローラー：

$scope.frame= '<iframe src="' + $scope.videoElement.str + '"></iframe>'; 

ビュー：safeHtmlが安全にHTMLをバインドするためのフィルタディレクティブで、$sceを使用しています

<div ng-bind-html="frame| safeHtml"> 

からDocumentation

アプリにこれを含めます：

app.filter('safeHtml', function ($sce) { 
    return function (val) { 
     return $sce.trustAsHtml(val); 
    }; 
}); 

UPDATE：

$scope.videoElement.strは、Iフレームのリンクである場合、以下のコードのように十分である：app.jsに上述したようsafeHtmlディレクティブを追加し、また

<div ng-bind-html="videoElement.str | safeHtml">

またはコントローラの終了後。