Question

我在iframe内的角度应用程序中加载了一个url。这是我的代码：

HTML：

<div layout="column" flex class="content-wrapper" id="primary-col">
       <md-content layout="column" flex class="md-padding">
              <h2>{{selected.name}}</h2>
              <p>{{selected.content}}</p>
              <div class="cell">
                <iframe ng-src="{{selected.imgurl}}"  >  
              </div>
      </md-content>
</div>

App.Js：

var routerApp =angular.module('DiginRt', ['ngMaterial'])
 routerApp.controller('AppCtrl', ['$scope', '$mdSidenav', 'muppetService', '$timeout','$log', function($scope, $mdSidenav, muppetService, $timeout, $log) {
  var allMuppets = [];

  $scope.selected = null;
  $scope.muppets = allMuppets;
  $scope.selectMuppet = selectMuppet;
  $scope.toggleSidenav = toggleSidenav;

  loadMuppets();

  //*******************
  // Internal Methods
  //*******************
  function loadMuppets() {
    muppetService.loadAll()
      .then(function(muppets){
        allMuppets = muppets;
        $scope.muppets = [].concat(muppets);
        $scope.selected = $scope.muppets[0];
      })
  }

  function toggleSidenav(name) {
    $mdSidenav(name).toggle();
  }

  function selectMuppet(muppet) {
    $scope.selected = angular.isNumber(muppet) ? $scope.muppets[muppet] : muppet;
    $scope.toggleSidenav('left');
  }
}])

    routerApp.service('muppetService', ['$q', function($q) {
      var muppets = [{
          name: 'Product Report',
          iconurl: 'https://lh3.googleusercontent.com/-KGsfSssKoEU/AAAAAAAAAAI/AAAAAAAAAC4/j_0iL_6y3dE/s96-c-k-no/photo.jpg',
          imgurl: 'https://my.infocaptor.com/dash/mt.php?pa=inflation_50da569f84101',
          content: ' '
      }, {
          name: 'Invoice Report',
          iconurl: 'https://yt3.ggpht.com/-cEjxni3_Jig/AAAAAAAAAAI/AAAAAAAAAAA/cMW2NEAUf-k/s88-c-k-no/photo.jpg',
          imgurl: 'https://my.infocaptor.com/dash/mt.php?pa=inflation_50da569f84101',
          content: ''
      } ];

      // Promise-based API
      return {
          loadAll: function() {
              // Simulate async nature of real remote calls
              return $q.when(muppets);
          }
      };
    }]);

它重新说错了 错误：[$ interpolate：interr]无法插值：{{selected.imgurl}} 错误：[$ sce：insecurl] $ sceDelegate政策不允许阻止从网址加载资源。

以下是Plunker

Answer 1

您需要使用$sce API清理网址，方法是使用您需要通过调用方法trustAsResourceUrl将该网址设为受信任的网址。

方式

$scope.trustSrc = $sce.trustAsResourceUrl;

<强> HTML

<iframe ng-src="{{trustSrc(selected.imgurl)}}"></iframe>

不要忘记在控制器上添加$sce依赖项。

Working Plunkr with you code

希望这可以帮到你。感谢。

在AngularJS app中的iFrame中加载URL

1 个答案: