内插时离子AngularJS错误

Question

我正在构建一个离子应用程序，它将显示在Wistia托管的视频。

我的观点html如下：

<div class="wistia-iframe-container">
    <iframe class="wistia-iframe content" src="{{filesCtrl.getWistiaURL(file.path)}}" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed"></iframe>
</div>

filesCtrl.getWistiaURL（file.path） 将返回wistia视频的完整网址。

我在coffeescript中的angularJS如下：

getWistiaURL: (path) ->
  'http://fast.wistia.net/embed/iframe/' + path

运行时我遇到以下错误：

  

错误：[$ interpolate：interr]无法插值：   {{filesCtrl.getWistiaURL（file.path）}}错误：[$ sce：insecurl]被阻止   $ sceDelegate policy不允许从url加载资源。

当我将{{filesCtrl.getWistiaURL（file.path）}}作为iframe src值时，才会发生此错误。

如果我只是将其显示为文本内容，则没有错误。

<p>{{filesCtrl.getWistiaURL(file.path)}}</p>

任何人都可以帮我解决这个问题吗？

Answer 1

这是angularjs中的安全问题。

解决方案是：

1. 将$ sce注入您的控制器

2. 返回$ sce bracket

   中的网址

   return $sce.trustAsResourceUrl(url);
   

3. 使用ng-src而不是src

虽然我仍然建议您使用指令来包装iframe，然后使用dom api直接更改src。