无法从 ionic 中的控制器将 URL 传递给视图答案

【问题标题】：Failing to pass URL to a view from a controller in ionic无法从 ionic 中的控制器将 URL 传递给视图
【发布时间】：2016-11-13 05:10:13
【问题描述】：

我正在尝试将 Youtube 视频 URL 传递给播放 Youtube 视频的 iframe 视图。但是，当我打开视图时，它只显示一个白页。

控制器

.controller('youtubeCtrl', function ($scope, $http, $ionicSideMenuDelegate){

  // Pop-up Navigation Menu
  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  }

  $scope.video_url = "https://www.youtube.com/embed/LFTEUBHpFq0";
})

查看

<ion-view title="Youtube">
  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
  </ion-nav-buttons>

  <ion-content>
    <div class="video-container">
        <iframe ng-src={{video_url}} frameborder="0" width="560" height="315" allowfullscreen></iframe>
    </div>
  </ion-content>
</ion-view>

我想通过'video_url'打开iframe并播放。但这并没有发生。我到底做错了什么或没有做什么？任何帮助将不胜感激。

【问题讨论】：

当您从网络浏览器运行它时是否有效？如果您尚未在 ionic 应用中允许 youtube.com，则可能不允许该应用访问该 url 中的内容。 cordova.apache.org/docs/en/latest/reference/…
它在网络浏览器中工作。
如果您可以在控制台中发布日志将会很有用。

标签： angularjs iframe ionic-framework youtube

【解决方案1】：

我建议你需要在控制器中注入$sce服务和trustAsResourceUrl那里的url。

在您的控制器中。

.controller('youtubeCtrl', function ($scope, $http, $ionicSideMenuDelegate, $sce){

  // Pop-up Navigation Menu
  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  }
  var videoSource = "https://www.youtube.com/embed/LFTEUBHpFq0"; 
  $scope.video_url = $sce.trustAsResourceUrl(videoSource)

})

工作Fiddle

希望这会有所帮助。

【讨论】：

非常感谢。它就像一个魅力。我很开心。再次感谢。
@BlakeTucker 我很高兴它有帮助，但是这个答案是否不符合您的问题要求？
在页面视图中，我无法查看和播放 youtube 视频。我尝试将 $https 添加到我的控制器，以及做很多其他事情。一切都是徒劳。但是当我将 $sce 添加到我的控制器时，我能够在页面视图中查看和播放 youtube 视频。离子 1.7.8，节点 v0.12.1，科尔多瓦 v5.4.0
太棒了。但是您应该将此答案正确标记为正确。 :)