音频标签，如何从 Angular 处理它

Posted 2023-02-25

【中文标题】音频标签，如何从 Angular 处理它

【英文标题】：Audio tag, how to handle it from Angular

【发布时间】：2015-04-25 23:25:34

【问题描述】：

我正在使用 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 中处理（参见 documentation）。这是为了分离关注点并提高其他角度参与者的可测试性，例如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>

【讨论】：

我正在使用 HTML5 音频标签执行此操作，我想在哪里设置 .play 和 .pause 类？我需要隐藏播放器，并通过按钮<button ng-click="playMusic(music)"></button>

调用它

对不起，我的小提琴坏了。现在更新它，我认为它正在做你想要的 - jsfiddle.net/dmLeu020/1

【参考方案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.

希望有帮助！