javascript - AudioタグをAngularからどのように扱うか

私はHTML5のオーディオタグを使用していますが、Angularから制御したいです。ガイドラインによれば、コントローラーからDOMに触れる必要はないので、ディレクティブを作成する必要があります。

この2つのボタンがあるとしましょう

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

そしてこれはJSの部分です

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

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

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

でも、それを Angular に書き起こす必要があります。では、それのディレクティブをどう作成すればいいですか？それとも、コントローラーでどう実装すればいいですか？

回答 #1

Angularでは、DOM操作は実際にはdirectiveで行うべきです（ドキュメントを参照）。これは関心の分離を行い、controllersやservicesなどの他のAngular要素のテスト容易性を向上させるためです。

オーディオを再生する基本的なdirectiveは、次のようなものになるかもしれません（フィドル）：

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

そして関連する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>

回答 #2

それをコントローラーで実装することはできますが、その中でDOM操作を行う必要があります…これはまさにあなたが避けようとしていることです。

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

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

いくつかの関連するコードで、最後のものを読むときに注意して見ると役立つかもしれません:

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

そしてここで ...

    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.

役に立てば嬉しいです！