Puis-je utiliser Angulaire de variables comme la source d'une balise audio?

Je suis en train de faire ce qui suit:

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

Mais lorsque je charge le point de vue, le {{audio}} la variable n'est pas analysé mais codé en dur dans le code source tel qu'il est. Cependant, si par exemple, je place cette même variable à l'extérieur de la balise audio il rend le nom du fichier audio correctement. J'ai essayé d'utiliser à la fois de la src et de ng-src en vain.

Est-il un moyen de récupérer la variable de travailler au sein d'une balise audio?

Merci d'avance.

Pense que c'est une autre affaire, dans le lien que vous avez posté la variable, il utilise les rend bien, mais la vidéo n'est pas lue. Dans mon cas, la variable n'est pas analysée. Je suis également de l'utiliser dans un ng-repeat.

InformationsquelleAutor Hols | 2014-05-14

7

~~je ne suis pas du tout que familier avec la ngSrc directive à l'extérieur de l'utiliser sur des images, mais il peut avoir besoin d'une balise img quelque part dans la source.~~

Essayez ceci:

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

~~ng-attr - directive peut être utilisée pour n'importe quel attribut qui n'ont pas de rôle spécifique dans angulaire. Vous pouvez en lire plus à ce sujet sur cette page.~~

Mise à jour, j'ai eu tort.

J'ai créé un jsfiddle et a trouvé l'erreur qui a été produit.

Vous obtenez une erreur de la sec, service. Voir le DONC, la question ici.

La solution est d'utiliser $sce.trustAsResourceUrl().

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

Mise à jour #2

Si vous ne souhaitez pas définir l'url comme codés en dur ou en boucle après que vous obtenez une réponse du serveur, vous pouvez utiliser un filtre personnalisé pour accomplir ce que vous cherchez. Cette méthode ne permet pas d'utiliser l'interpolation, qui est l'endroit où l'erreur est levée.

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>
```
Et la nouveau violon.
- Merci pour la réponse, unfortunely-je obtenir le même résultat en utilisant "ng-attr-src". La variable n'est pas analysé dans sa valeur propre.
- J'ai créé un jsfiddle et a trouvé l'erreur est générée. Juste mis à jour ma réponse.
- Merci, cela fonctionne très bien avec la codé en dur le nom des fichiers directement dans le contrôleur, mais si je reçois les noms de fichiers à partir d'un objet json? Comme il est, dans mon application chaque événement a sa propre objet json qui, à son tour, a sa propre série de fichiers audio. Est-il un moyen de faire la même chose dans ce cas?
- Malheureusement angulaire interdit d'interpolation dans ces cas-là...j'ai joué un peu avec elle et le mieux que j'ai pu trouver à faire, c'était le passage de la audio dans un filtre qui ne échapper. Je vais mettre à jour ma réponse.
- Ok, merci pour vos commentaires et un peu de réflexion autour de moi, je résolus d'une manière différente, voir ma réponse ci-dessous. Merci encore pour vos réponses!
InformationsquelleAutor theJoeBiz

Ok, merci pour theJoeBiz d'entrée et de réflexion autour de j'ai résolu ce problème en faisant une directive, voici le code:

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);
           }
        });
    }
  };
});

Puis sur le modèle, je l'ai utilisé comme:

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

Il est tout fonctionne bien maintenant.

InformationsquelleAutor Hols

3

Hey FWIW, j'ai trouvé cette page, vous cherchez une solution pour modèle d'URL pour ma balise audio. Cependant, je suis à l'aide de plusieurs balises de la source de la croix-prise en charge du navigateur:
```
<audio id="myAudioTag">
  <source ng-src="{{sceSoundUrlMp3}}">
  <source ng-src="{{sceSoundUrlOgg}}">
</audio>
```
D'abord, j'ai résolu SCE questions par liste blanche *.ogg, *.mp3: (garder le " moi " sinon vos demandes futures échec)
```
.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    "self",
    /(mp3|ogg)$/,
  ]);
})
```
Ce cessé de donner des SCE erreurs, mais Firefox déclaré "pas de source" et n'a pas remarqué la src tag angulaire ajouté.

La dernière étape a été d'appeler la charge sur l'élément de confiance et de réglage $scope.sceSoundUrlMp3: $('#myAudioTag')[0].load()

InformationsquelleAutor Plato
0

J'ai utilisé $sce.trustAsResourceUrl("/data/media/" + newVal) mais il ne fonctionne pas pour.Ce qui semblait fonctionner pour moi a été de mettre document.getElementById('player').src = {{url}}
dans le contrôleur de

Espère que ça aide quelqu'un d'autre

InformationsquelleAutor MFahad

Vous devez vous connecter pour publier un commentaire.