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屬性