Question

我正在使用HTML5音频标签，但是我想从Angular控制它，根据指南我不必从控制器触摸DOM，所以我必须创建一个指令。

假设我有这两个按钮

<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操作都应该在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>

Answer 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.

希望有所帮助！

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

2 个答案: