Tag audio, come gestirlo da Angular

Question

Sto usando il tag audio HTML5, ma voglio controllarlo da Angular, secondo le linee guida Non devo toccare il DOM dai Controller quindi devo creare una direttiva.

Diciamo che ho questo 2 pulsanti

<button onclick="playMusic()" type="button">Play Music</button> 
<button onclick="pauseMusic()" type="button">Pause Music</button> 

e questo nella parte JS

var music = document.getElementById("myMusic"); 

function playMusic() { 
    music.play(); 
} 

function pauseMusic() { 
    music.pause(); 
} 

ma ho bisogno di trascrivere che in angolare, così, come posso creare una direttiva per questo ? o posso implementarlo in un controller?

Answer 1

In angolare, qualsiasi manipolazione DOM deve essere effettivamente gestita in un directive (vedere documentation). Questo per separare le preoccupazioni e migliorare la testabilità di altri attori angolari come controllers e services.

Una base directive di riprodurre audio potrebbe essere simile a questo (fiddle):

app.directive('myAudio', function() { 
    return { 
     restrict: 'E', 
     link: function(scope, element, attr) { 
      var player = element.children('.player')[0]; 
      element.children('.play').on('click', function() { 
       player.play(); 
      }); 
      element.children('.pause').on('click', function() { 
       player.pause(); 
      }); 
     } 
    }; 
}); 

E l'HTML associato:

<my-audio> 
    <audio> 
     <source src="demo-audio.ogg" /> 
     <source src="demo-audio.mp3" /> 
    </audio> 
    <button class="play">Play Music</button> 
    <button class="pause">Pause Music</button> 
</my-audio> 

Answer 2

È possibile implementarlo nel controller, ma è necessario eseguire le manipolazioni DOM in là ... che è esattamente ciò che si sta tentando di evitare.

https://docs.angularjs.org/guide/directive

http://ng-learn.org/2014/01/Dom-Manipulations/

Alcuni relativo codice, che potrebbe essere utile per guardare fuori per mentre si legge l'ultima:

element = angular.element('<div class="form" data-my-slide="showForm">Text</div>'); 

e qui ...

link: function(scope, element, attrs) { 

     // We dont want to abuse on watch but here it is critical to determine if the parameter has changed. 
     scope.$watch(attrs.mySlide, function(newValue, oldValue) { 

     // This is our logic. If parameter is true slideDown otherwise slideUp. 

Spero che questo aiuti!