音频标签，如何处理来自 Angular

Question

我正在使用 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，那么，我如何为此创建一个指令？或者我可以在控制器中实现它吗？

Answer 1

您可以在控制器中实现它，但您需要在其中执行 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.

希望对您有所帮助！

Answer 2

在 angular 中，任何 DOM 操作实际上应该在 directive 中处理（参见 documentation）。这是为了分离关注点并提高其他 angular 参与者（例如 controllers 和 services）的可测试性。

播放音频的基本 directive 可能看起来像这样 (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();
            });
        }
    };
});

以及关联的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>

音频标签，如何处理来自 Angular

Audio tag, how to handle it from Angular

html

javascript

audio

html5-audio

angularjs