angularjs 中的iframe 标签 ng-src 路径


如果直接写路径到iframe标签里的ng-src中会出现报错;

  解决方法:

1、ng里面有个属性是专门用来解决跨域问题的 $sce。

  用法:

$scope.someUrl = $sce.trustAsResourceUrl('路径');
例:
<ul class="nav nav-tabs" ng-repeat="item in [1,2,3,4]">  
         <iframe ng-src="{{someUrl}}" height="100%" width="100%"></iframe>                    
</ul>

2、可以巧用上面方法写一个过滤器。
angular.module('filters-module', [])
.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}])
例:

<ul class="nav nav-tabs" ng-repeat="item in [1,2,3,4]">  
         <iframe ng-src="{{someUrl |trustAsResourceUrl }}" height="100%" width="100%"></iframe>                    
</ul>
 





 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



猜您在找 angular中iframe的ng-src属性 angularjs中的ng-src和ng-href AngularJS中如果ng-src 图片加载失败怎么办 AngularJS学习--- AngularJS中模板链接和图像 ng-src step6 angular—— 当ng-src图片路径为空 设置默认图片 解决Angular图片ng-src指令不马上更新图片的问题 关于iframe标签的src属性