如何将iframe用作ngView? [英] How to use an iframe as ngView?

问题描述

我有一个名为"index.html"的页面 它具有包含多个链接的左窗格和包含iframe的右窗格.

I've a page called 'index.html' it has left pane with multiple links and right pane which contains iframe.

当我单击左窗格中的链接时，该页面(而不是外部网站或页面)应该会加载到iframe中.

When I click a link from left pane the page(not external sites or pages) should get load inside iframe.

推荐答案

Angular在iframe上支持ng-src，因此您可以像这样用自己的网址设置ng-src.

Angular supports ng-src on iframe , so you can set ng-src with your url like this.

<div><iframe  width="640" height="385" ng-src="{{getUrl()}}"> </iframe></div>

在将URL设置到iframe之前，getUrl会对其进行清理.控制器将像这样简单.

The getUrl sanitizes the url before setting it on the iframe. The controller will be as simple as this.

$scope.currentUrl = "http://www.youtube.com/embed/Lx7ycjC8qjE";

  $scope.urls = [
    {
      name:"http://www.youtube.com/embed/Lx7ycjC8qjE"
    },
    {
      name:"http://www.youtube.com/embed/mMxQHmvQ1pA"
    }];

    $scope.setCurrentUrl = function(url)
    {
      $scope.currentUrl = url;
    }

    $scope.getUrl = function()
    {
      console.log($scope.currentUrl);
       return $sce.trustAsResourceUrl($scope.currentUrl);
    }

这里是样本plnkr.

Here is a sample plnkr.

http://plnkr.co/edit/EVkyH8LuCXcsWUi1xnvV?p=preview

这篇关于如何将iframe用作ngView?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！