如何使用 iframe 作为 ngView?

问题描述

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

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

解决方案

Angular 在 iframe 上支持 ng-src，所以你可以像这样用你的 url 设置 ng-src.

</iframe></div>

getUrl 在将 url 设置到 iframe 之前对其进行清理.控制器就这么简单.

$scope.currentUrl = "http://www.youtube.com/embed/Lx7ycjC8qjE";$scope.urls = [{名称:http://www.youtube.com/embed/Lx7ycjC8qjE"},{名称:http://www.youtube.com/embed/mMxQHmvQ1pA"}];$scope.setCurrentUrl = 函数(网址){$scope.currentUrl = url;}$scope.getUrl = function(){控制台日志($scope.currentUrl)；返回 $sce.trustAsResourceUrl($scope.currentUrl);}

这是一个示例 plnkr.

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

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

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

解决方案

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>

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);
    }

Here is a sample plnkr.

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

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