2016-12-02 8 views
0

これは私の最初のWebの仕事です。私はいくつかのvarから私のiframeの値 "ビデオ="を変更する必要があります。JavaScript/HTML5/angularjsのhtmlタグの値を変更します。var

<ons-page ons-show="updateToolbar('Search'); !isAndroid() && focusInput('ios')" ng-infinite-scroll="loadMore"> 
    <ons-if class="search-bar" platform="ios other"> 
    <form ng-submit="search(true); blurInput('ios')"> 
     <ons-input type="search" class="search-input" input-id="ios-search-input" placeholder="Search for videos in YouTube" ng-model="query"></ons-input> 
    </form> 
    </ons-if> 

    <div class="content"> 

    <ons-list> 
     <ons-list-item tappable ng-repeat="video in results track by $index" ng-click="modal.show(); launch(video, true)"> 
     <div class="left"> 
      <img class="thumbnail" ng-src="{{ video.thumbnail }}"> 
     </div> 
     <div class="center"> 
      <div class="title"> 
      {{video.id}} 
      </div> 
     <div class="desc"> 
      <br> 

<iframe style="width:230px;height:60px;border:0;overflow:hidden;" scrolling="no" src="//xxx/widget/button/?video=https://www.youtube.com/watch?v=FX5DhPeT12E 
&color=e52d27"> 

srcを新しいYouTubeリンクに挿入する方法は?それは私のカスタムプレーヤーです。 YouTubeのIDは {{video.id}}

答えて

1

あなたはtrustSrc

<iframe class="youtube-player" type="text/html" width="640" height="385" ng-src="{{trustSrc(movie.src)}}" allowfullscreen frameborder="0"> 

Controller:

app.controller('MainCtrl', function($scope, $sce) { 
    $scope.trustSrc = function(src) { 
    return $sce.trustAsResourceUrl(src); 
    } 
    $scope.movie = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"}; 
}); 
を使用する必要があります

DEMO

+0

私は単一定数のsrcをロードするのは問題ありません。問題は、私が変数video.idにあるものを正確にロードする必要があるときです。 – ramzixp

+0

あなたのソリューションをリファクタリングしました。ありがとう、華麗です。 – ramzixp

1

によってretrivenすることができng-srcをお試しください:

<iframe ng-src="//xxx/widget/button/?video={{video.id}}" /> 
+0

ええ、前に試しました。たぶんそれはいくつかのAPIの制限ですが、私が試してみると、私の検索は完全に破滅します。結果リストには何も表示されません。奇妙なことに、このiframeは残りのコードから分離する必要があります。私はウェブの事でnoobyです:)しかし、助けのためにthx – ramzixp

関連する問題