【问题标题】:Angular setting $sce in ng-repeatng-repeat 中的角度设置 $sce
【发布时间】:2016-11-07 12:24:19
【问题描述】:

我正在尝试在 iframe 中显示视频,但即使我获得了正确的嵌入链接,也没有显示任何内容。我已经尝试通过仅显示链接来测试它并显示正确的链接,当我为 iframe 硬编码相同的链接时,会显示视频,但是当我像这样拥有它时,iframe 中什么也没有呈现:

<ion-item ng-repeat="article in articles" class="item-light">
    <img ng-show="article.external_media.length == 0 || article.external_media.url == ''"  src="http://coop.app/imagecache/cover/{{article.cover_image}}">
    <iframe ng-show="article.external_media.length > 0 && article.external_media.url != ''" src="{{article.external_media[0].url}}"></iframe>
</ion-item>

更新

由于我需要注入 $sce 依赖项,我想知道如何将它应用到我的控制器中所有可能的链接。这个函数看起来怎么样?

这是我的控制器:

.controller('FrontPageController', function($scope, ArticleService, $state) {
  ArticleService.all().then(function(data){
    $scope.articles = data;
})

【问题讨论】:

标签: javascript angularjs iframe


【解决方案1】:

由于我需要注入 $sce 依赖项,我想知道如何将它应用到我的控制器中所有可能的链接。这个函数看起来怎么样?

我会为此推荐一个过滤器。

.filter( 'safeUrl', [
    '$sce'
    function( $sce ){
        return function(url){
             //not sure which one you need here
             return $sce.trustAsUrl(url)
        }
    }
])

在你的 html 中

<iframe src="{{article.external_media[0].url | safeUrl}}">

我提倡过滤控制器方法只是因为我喜欢让我的控制器非常轻量级。如果需要解释,我会使用过滤器。

【讨论】:

  • 我已经尝试过你的建议,但我得到 ionic.bundle.js:26794 错误:[$interpolate:interr] 无法插入:{{article.external_media[0].url | safeUrl }} 错误:[$sce:insecurl] 阻止从 url 加载资源,$sceDelegate 策略不允许。
  • 尝试改用$sce.trustAsResourceUrl?我没有将 $sce 用于 iFrame,所以我不知道哪种方法适合使用我的评论 //not sure which one you need here
猜你喜欢
  • 2016-07-15
  • 1970-01-01
  • 2015-06-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-04-19
  • 1970-01-01
相关资源
最近更新 更多