我的{{url}}有什麼問題？

在angular.js和離子框架中，我試圖列出一些YouTube電影，並試圖從數組中輸入src。我的{{url}}有什麼問題？

下面是services.js數據

var friends = [ 
{ id: 0, name: 'Omvända ZombieGrodor', url: '//www.youtube.com/embed/PHlIcWOwzQI?list=UUelsYLaipZjghHb8Wu_xm1g' }, 
{ id: 1, name: 'Höftlyft', url: '//www.youtube.com/embed/3o39iMaxVk4?list=UUelsYLaipZjghHb8Wu_xm1g' }, 
{ id: 2, name: 'Löparen', url: '//www.youtube.com/embed/21cLUxul11A?list=UUelsYLaipZjghHb8Wu_xm1g' },

];

而這裏的HTML：

 <div class="list card"> 
     <div class="item item-image item-text-wrap"> 
      <iframe width="385" height="217" src="{{friend.url}}" frameborder="0" allowfullscreen></iframe> 
      Friend.url: {{friend.url}} 
     </div> 
    </div>

如果我硬編碼在它的工作原理SRC領域的URL。但它不適用於這個{{friend.url}}爲什麼？另外，如果我打印出{{friend.url}}（如代碼示例中所示），它顯示正常！

感謝您的幫助。

更新：我已將src更改爲ng-src，但它仍然無效。

<iframe width="385" height="217" ng-src="{{friend.url}}" frameborder="0" allowfullscreen></iframe>

來源

2014-09-10 Tommy Sollén

做喲你有一個ng-repeat的iframe嗎？ friends變量是一個數組，所以你需要以某種方式迭代它。 – 2014-09-10 19:58:04

是的，另一個模板實際上使用ng-repeat來創建列表。點擊這個列表中的一個項目會導致我上面寫的代碼和問題。迭代不是問題。這是ng-src無效。爲什麼？ – 2014-09-10 20:07:39

你的朋友數組網址缺少一個http：前綴。這可能有助於嗎？ – 2014-09-10 20:21:15

謝謝@noahmonster來指點我這個線程AngularJS ng-src inside of iframe解決了我的問題。

這裏的解決方案：

<iframe width="385" height="217" src="{{friend.url | trustAsResourceUrl}}" frameborder="0" allowfullscreen></iframe>

（注意過濾器！）

我加入這個代碼到app.js：

.filter('trustAsResourceUrl', ['$sce', function($sce) { 
return function(val) { 
    return $sce.trustAsResourceUrl(val); 
};

}]）

現在它就像一個魅力:)

來源

2014-09-10 20:45:59

有人可以接受我的答案嗎？（我不能直到兩天後） – 2014-09-10 20:47:39

我認爲只有問題提問者可以接受答案嗎？無論如何，+1詳細發佈解決方案。 – 2014-09-10 21:28:36

你打賭！當人們花時間和精力去幫助我時，我非常喜歡它，所以我盡我所能回饋:) – 2014-09-10 21:33:54

請看這裏http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview

angular.js是不會插你friend.url如將其視爲取消保存。你可以在我的例子使用$ SCE服務像

該腳本添加到您的主頁

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-sanitize.min.js"><script>

JS：

var app = angular.module('plunker', ["ngSanitize"]); 

    app.controller('MainCtrl', function($scope,$sce) { 
     var friends = [ 
    { id: 0, name: 'Omvända ZombieGrodor', url: '//www.youtube.com/embed/PHlIcWOwzQI?list=UUelsYLaipZjghHb8Wu_xm1g' }, 
    { id: 1, name: 'Höftlyft', url: '//www.youtube.com/embed/3o39iMaxVk4?list=UUelsYLaipZjghHb8Wu_xm1g' }, 
    { id: 2, name: 'Löparen', url: '//www.youtube.com/embed/21cLUxul11A?list=UUelsYLaipZjghHb8Wu_xm1g' }, 
    ]; 
    $scope.friends = []; 

    angular.forEach(friends, function(friend){ 

     friend.url = $sce.trustAsResourceUrl(friend.url); 
     $scope.friends.push(friend); 

    }) 

    });

來源

2014-09-10 20:41:01 sylwester

謝謝@sss我剛找到解決方案，所以我沒有仔細檢查你的建議。 – 2014-09-10 20:47:04

我的{{url}}有什麼問題？

回答

相關問題