Question

我正在尝试使用存储在数据库中的youtube ID嵌入youtube iframe。但是我在逃避斜线时遇到了错误。

 <tr ng-click="edit_source_data(source)" ng-repeat="source in sources">
        <td>{{source.title}}</td>
        <td>{{source.type}}</td>
        <td>
            <iframe width="100" height="100" src="https://www.youtube.com/embed/{{source.link}}" frameborder="0" allowfullscreen></iframe>
            <!--https://www.youtube.com/embed/-->
        </td>
        <td><span class="delete" data-id="{{source.id}}" ng-click="del_source($event);
                $event.stopPropagation();">Delete</span></td>
    </tr>

但是，如果我从src中删除https://www.youtube.com/embed/部分，则没有错误。我该怎么解决呢谢谢。

Answer 1

 <iframe width="100" height="100" 
  ng-src="https://www.youtube.com/embed/{{source.link}}" 
  frameborder="0" allowfullscreen>
 </iframe>

Answer 2

你需要在控制器中注入$ sce服务，并在那里注入trustAsResourceUrl。

在控制器中：

function AppCtrl($scope, $sce) {
// ...
$scope.GetLink = function (source) {

  return  $sce.trustAsResourceUrl("https://www.youtube.com/embed/"+source.link);
 }
}

模板中的

 <iframe width="100" height="100" 
ng-src="GetLink(source)"   frameborder="0" allowfullscreen></iframe>

如何逃避斜线angularjs

2 个答案: