JavaScript/HTML5/angularjs 更改 html 标签 var 的值

Question

这是我的第一个网络任务，我需要从某些变量更改 iframe 中的值“video=”。

<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}}

Answer 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