Audio-Tag, wie man es von Angular behandelt

Question

Ich benutze das HTML5-Audio-Tag, aber ich möchte es von Angular steuern, nach den Richtlinien muss ich nicht das DOM von den Controllern berühren, so dass ich erstellen muss eine Richtlinie.

Lassen Sie uns sagen, ich habe dieses Bild 2 Tasten

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

und dies im JS Teil

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

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

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

aber ich brauche, dass in Eckige Transkript, so, wie kann ich eine Richtlinie für das Erstellen ? oder kann ich es in einem Controller implementieren?

Answer 1

In Winkel sollte jede DOM-Manipulation wirklich in einem directive behandelt werden (siehe documentation). Dies dient zur Trennung von Bedenken und zur Verbesserung der Testbarkeit anderer Winkelaktoren wie controllers und services.

Ein grundlegendes directive spielen Audio etwas könnte wie folgt aussehen (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(); 
      }); 
     } 
    }; 
}); 

Und das dazugehörige HTML:

<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

Sie können es in den Controller implementieren, aber Sie müssten Ihre DOM-Manipulationen dort durchführen ... was genau Sie versuchen zu vermeiden.

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

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

Einige relevante Code, der nützlich sein könnte, zu suchen, während Sie die letzte lesen:

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

und hier ...

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. 

Hoffe, dass hilft!