Thẻ âm thanh, cách xử lý nó từ Angular

Question

Tôi đang sử dụng thẻ âm thanh HTML5, nhưng tôi muốn kiểm soát nó từ Angular, theo các nguyên tắc tôi không phải chạm vào DOM từ Bộ điều khiển vì vậy tôi phải tạo một Chỉ thị.

Hãy nói rằng tôi có điều này 2 nút

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

và điều này ở phần JS

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

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

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

nhưng tôi cần phải Transcript đó vào góc, vì vậy, làm thế nào tôi có thể tạo ra một chỉ thị cho điều đó ? hoặc hoy tôi có thể thực hiện nó trong một Controller?

Answer 1

Trong góc cạnh, bất kỳ thao tác DOM nào thực sự phải được xử lý trong một directive (xem documentation). Điều này nhằm phân tách mối quan tâm và cải thiện khả năng kiểm tra của các diễn viên góc khác như controllers và services.

Một cơ bản directive để chơi âm thanh có thể giống như thế này (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(); 
      }); 
     } 
    }; 
}); 

Và HTML liên quan:

<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

Bạn có thể thực hiện nó trong bộ điều khiển, nhưng bạn cần phải thực hiện các thao tác DOM của bạn trong đó ... đó là chính xác những gì bạn đang cố gắng tránh.

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

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

Một số mã có liên quan, trong đó có thể có ích để tìm cho ra trong khi bạn đọc mới nhất:

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

và đây ...

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. 

Hy vọng điều đó sẽ hữu ích!