我可以使用Angular變量作爲音頻標籤的來源嗎？

我試圖做到以下幾點：我可以使用Angular變量作爲音頻標籤的來源嗎？

<div ng-repeat="audio in event.audios"> 
    <audio ng-src="/data/media/{{audio}}" controls></audio> 
</div>

但是當我加載視圖中，{{音頻}}變量沒有解析，但硬編碼到源原樣。但是，例如，如果我將同一個變量置於音頻標籤之外，則會正確呈現音頻文件的名稱。我試過使用src和ng-src都無濟於事。

有沒有辦法讓變量在音頻標籤中工作？

在此先感謝。

來源

2014-05-14 Hols

認爲這是一個不同的情況下，你貼他使用的變量的聯繫使得罰款，但沒有視頻播放呢。在我的情況下，該變量不被解析。我也在ng-repeat中使用它。 – Hols

好，感謝theJoeBiz的輸入和一些思考，圍繞我解決了這個由作出指示，這裏是代碼：

app.directive('audios', function($sce) { 
    return { 
    restrict: 'A', 
    scope: { code:'=' }, 
    replace: true, 
    template: '<audio ng-src="{{url}}" controls></audio>', 
    link: function (scope) { 
     scope.$watch('code', function (newVal, oldVal) { 
      if (newVal !== undefined) { 
       scope.url = $sce.trustAsResourceUrl("/data/media/" + newVal); 
      } 
     }); 
    } 
    }; 
});

然後在我用它像這樣的模板：

<div ng-repeat="audio in event.audios"> 
    <div audios code="audio"></div> 
</div>

現在一切正常。

來源

2014-05-14 19:21:08 Hols

~~我不是全部那熟悉ngSrc指令而不是在圖像上使用它，但它可能需要在源代碼的某個地方使用img標籤。~~

試試這個：

<div ng-repeat="audio in event.audios"> <audio ng-attr-src="/data/media/{{audio}}" controls></audio> </div>

~~的NG-attr-指令可用於不具有在角特定角色的任何屬性。你可以在 this page上閱讀更多關於它的信息。~~

更新，我錯了。

我創建了一個jsfiddle，發現發生的實際錯誤。

您從sce服務中收到錯誤。見SO問題here。

解決方法是使用$sce.trustAsResourceUrl()。

實施例：

angular.module('AudioTest', []) 
.controller('AudioTestCtrl', function($scope, $sce) { 
    $scope.event = { 'audios': [ 
     $sce.trustAsResourceUrl('/data/media/test1'), 
     $sce.trustAsResourceUrl('/data/media/test2') 
    ]}; 
});

Here's the fiddle。

更新＃2

如果你不想設置URL硬編碼或通過你從服務器得到響應後循環，你可以使用自定義過濾器來完成你在做什麼尋找。此方法不使用插值，這是引發錯誤的地方。

JS：

angular.module('AudioTest', []) 
.filter('trustedAudioUrl', function($sce) { 
    return function(path, audioFile) { 
     return $sce.trustAsResourceUrl(path + audioFile); 
    }; 
}) 
.controller('AudioTestCtrl', function($scope) { 
    $scope.event = { 'audios': ['test1', 'test2']}; 
});

HTML：

<div ng-app="AudioTest"> 
    <div ng-controller="AudioTestCtrl"> 
     <div ng-repeat="audio in event.audios"> 
      <audio ng-src="/data/media/ | trustedAudioUrl:audio)" controls></audio> 
     </div> 
    </div> 
</div>

而且new fiddle。

來源

2014-05-14 16:39:18 theJoeBiz

感謝您的回覆，不幸的是，我通過使用「ng-attr-src」獲得了相同的結果。該變量未被解析爲適當的值。 – Hols

我創建了一個jsfiddle，並發現拋出的實際錯誤。剛剛更新了我的答案。 – theJoeBiz

謝謝，這適用於控制器中的文件的硬編碼名稱，但是如果我從json對象獲取文件名？實際上，在我的應用程序中，每個事件都有它自己的json對象，而這個json對象又擁有自己的音頻文件陣列。在這種情況下有沒有辦法做到這一點？ – Hols

嘿FWIW我發現這個頁面尋找一個解決方案模板URL的我的音頻標籤。不過我使用了跨瀏覽器支持多源標籤：

<audio id="myAudioTag"> 
    <source ng-src="{{sceSoundUrlMp3}}"> 
    <source ng-src="{{sceSoundUrlOgg}}"> 
</audio>

首先我解決了問題，SCE通過白名單* .OGG，* .MP3：（保持「自我」，否則你將來的請求失敗）

.config(function($sceDelegateProvider) { 
    $sceDelegateProvider.resourceUrlWhitelist([ 
    "self", 
    /(mp3|ogg)$/, 
    ]); 
})

這停止了給SCE錯誤，但Firefox報告「沒有來源」，並沒有注意到添加了src標記角度。

最後一步就是信任和設置$scope.sceSoundUrlMp3後致電元素上載：$('#myAudioTag')[0].load()

來源

2015-07-13 21:51:53 Plato

我用$sce.trustAsResourceUrl("/data/media/" + newVal)但它沒有工作for.What似乎爲我的工作是把document.getElementById('player').src = {{url}} 在控制器

希望幫助別人

來源

2016-05-12 22:04:10 MFahad

我可以使用Angular變量作爲音頻標籤的來源嗎？

回答

相關問題