iframe 中的 ng-src 属性不接受表达式？使用 Angular.js

Posted 2023-03-05

【中文标题】iframe 中的 ng-src 属性不接受表达式？使用 Angular.js

【英文标题】：ng-src attribute in an iframe doesn't accept expressions ? using Angular.js

【发布时间】：2015-03-27 10:56:12

【问题描述】：

我正在尝试显示可以从我的阵列中取出的特定 ID 的 youtube 视频。我使用表达式在我的 ng-src 属性中的正确位置填写此 ID，但它不起作用。我在 i-frame 上方使用了相同的表达式来查看表达式是否有效，并且确实有效。

<iframe allowfullscreen="" 
        frameborder="0" 
         
        ng-src="http://www.youtube.com/embed/selectedSong.youtube_ids.default?rel=0?rel=0&amp;hd=1" 
        >
</iframe> 

如您所见，我使用 selectedSong.youtube_ids.default 表达式作为我的 id，但是当我在运行时检查我的 html 时，它显示的是表达式而不是结果（所以我确定它不起作用）。

【问题讨论】：

如果你能分享一个 plunkr 就好了。

我马上去看看。

Angular JS: How to set an iframe src attribute from a variable 的可能重复项

***.com/questions/13881834/…

【参考方案1】：

在您的控制器中：插入参数：$sce

function($sce, ...)

$scope.linkYoutube = $sce.trustAsResourceUrl('http://www.youtube.com/embed/'+data['yourLink']);

然后在html中，可以使用`ng-src="linkYoutube"

【参考方案2】：

我已经找到了一个更好的解决方案来解决这个问题：

Alternative to iFrames with HTML5

【参考方案3】：

据我所知，这是行不通的，因为安全问题可以防止 xss 攻击。但是您可以创建一个过滤器来信任以下网址：

angular.module('filters', []).filter('trustThisUrl', ['$sce', function($sce) 
    return function(val) 
        return $sce.trustAsResourceUrl(val);
    ;
]);

然后在src中调用它作为url的过滤器

<iframe ng-src=" anUrlFromYourController | trustThisUrl"></iframe>

【讨论】：

我已经添加了这个过滤器，但现在我试图弄清楚我必须如何在我的表达式中声明“anUrlFromYourController”我已经尝试过类似这样的 ng-src="@987654321 @" + selectedSong.youtube_ids.default + "?rel=0?rel=0&hd=1" | trustThisUrl"

你应该尝试在你的控制器中构建完整的 URL 以避免ng-src 中的连接。我不知道这是否是一种不好的做法，但是如果您在控制器中构建 URL，您的代码会变得更清晰、更具可读性，并且您可以让过滤器正常工作，因为它会评估变量值。

很抱歉打扰你，但我是 angular.js 和 javascript 的初学者，你能解释一下我是如何在我的控制器中构建这个 URL 的吗？

你根本没有打扰我。好吧，考虑到您的iframe 在ng-repeat 内，selectedSong 是数组的一个元素，对吧？因此，您可以在将它传递给页面之前在控制器上迭代该数组。类似于：for(var i in songs) songs[i].fullUrl = "http://www.youtube.com/embed/"+song[i].youtube_ids.default+"?rel=0?rel=0&hd=1 " ，然后将songs 数组放入$scope 变量中以在ng-repeat 中使用。之后只需调用fullUrl 作为属性，例如：ng-src=selectedSong.fullUrl | trustThisUrl

我仍然对使用 $scope 变量等感到困惑，正如我所说，我是一个非常大的菜鸟，这个 javascript 看起来非常先进，我可以请你花点时间看看我在 Plunkr 上的申请？这是链接：plnkr.co/edit/SJHNbzhQXIpYxifWBKuh?p=preview