How to target a html element with a controller in Angular?

Question

I want to use the HTML5 audio element attributes (play/stop/pause/...) in a controller in Angular. But I have multiple audio elements generated by a foreach loop so selecting by ID is not an option (except if I give id's based on the index of my foreach, which doesn't seem the right way).

My abbreviated html:

<div ng-controller="LoopController">
    <a ng-click="playLoop()">Play</a>
    <audio id="music" controls loop>
        <source src="songs/music1.mp3" type="audio/mpeg">
    </audio>
</div>

<div ng-controller="LoopController">
    <a ng-click="playLoop()">Play</a>
    <audio id="music" controls loop>
        <source src="songs/music2.mp3" type="audio/mpeg">
    </audio>
</div>

Angular controller:

gloopsApp.controller('LoopController', ['$scope', function($scope) {
    var music = document.getElementById('music');
    //here I want to target the audio element that is in this controller

    $scope.playLoop = function() {
        if (music.paused) {
            music.play();
        } else {
            music.pause();
        }
    };
}]);

I suggest adding the foreach loop in the example code or adding a plunker to demonstrate. It's difficult to see what's wrong. — Gene
– Gene, Commented Mar 26, 2016 at 22:07
There are 2 elements with the ID music now , I want to target the audio element that is currently encapsulated in that controller so that it only targets 1 audio element — Jim Peeters
– Jim Peeters, Commented Mar 26, 2016 at 22:09
I added a solution that is the more Angular way of doing this, that will help with your encapsulation issue. — Gene
– Gene, Commented Mar 26, 2016 at 22:22

dev7 · Accepted Answer · 2016-03-26 22:18:50Z

2

You can get the clicked element using $event and find the next element.

Also, you can't have more than one dom element with the same id, so use class instead.

The following was not tested yet but should work:

        <div ng-controller="LoopController">
        <a ng-click="playLoop(event)">
            Play
        </a>
        <audio class="music" controls loop>
          <source src="songs/music1.mp3" type="audio/mpeg">
        </audio>
    </div>

    <div ng-controller="LoopController">
        <a ng-click="playLoop($event)">
            Play
        </a>
        <audio class="music" controls loop>
          <source src="songs/music2.mp3" type="audio/mpeg">
        </audio>
    </div>

Your js:

gloopsApp.controller('LoopController', ['$scope', function($scope) {

  //here I want to target the audio element that is in this controller

  $scope.playLoop = function($event) {

    var music = angular.element($event.target).next('.music');//or $event.currentTarget

    if (music.paused) {
        music.play();
    } 
    else { 
        music.pause();
    }

   //consider refactoring to 
   //music.paused ? music.play() : music.pause();
  };
}]);

In addition, I don't really see a reason why you want each div to have its own controller (although technically it's ok to do so), simply assigning the controller to the parent element should work just fine and will be better performance assuming you have many music elements (just 1 scope instance instead of N instances).

edited Mar 26, 2016 at 22:18

answered Mar 26, 2016 at 22:08

dev7

6,4196 gold badges36 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jim Peeters Over a year ago

This still gives me an 'undefined' for the music variable

dev7 Over a year ago

Have you added the $event to the html? try using $event.currentTarget instead of $event.target and see if it works. If not - run console.log($event) and see what it gives you

Jim Peeters Over a year ago

With the edit I made in your answer it worked, is this a good way to do this?

dev7 Over a year ago

It is definitely a valid way to do it without refactoring your whole code. However, you should look into creating a directive as @Dr Jones suggested as well as this is a more 'Angular way' of doing it.

Gene · Accepted Answer · 2016-03-26 22:48:56Z

1

So a more Angular way of doing this code is to write a Directive. This helps with DRY and encapsulating functionality. The pseudo Angular code of this would be:

Controller HTML - This replaces your existing repeated code. - controller.js

<song-player src="songs/music1.mp3"></song-player>
<song-player src="songs/music2.mp3"></song-player>

Song-player Directive HTML - e.g. song-player.html

<div class="songPlayerContainer">
    <a ng-click="playLoop()">Play</a>
    <audio id="music" controls loop>
        <source src="{{src}}" type="audio/mpeg">
    </audio>
</div>

song-player Directive Javascript - e.g. song-player.js

gloopsApp.directive('songPlayer', function() {
    return {
      restrict: 'E',
      template: '<path to your template>/song-player.html
      scope: { 'src': '=' },
      link: function(scope, element, attrs) {
        var music = $(element).find('music');
         scope.playLoop = function() {
           if (music.paused) {
             music.play();
         } else {
            music.pause();
         }
    };
});

edited Mar 26, 2016 at 22:48

answered Mar 26, 2016 at 22:22

Gene

6164 silver badges8 bronze badges

2 Comments

Jim Peeters Over a year ago

But the playLoop function is executed with an ng-click on a button outside of this directive? Sorry I'm still in the learning progress of Angular

Gene Over a year ago

Actually it's within this directive... I forgot to add the directive HTML - Let me clarify 2 seconds.

Collectives™ on Stack Overflow

How to target a html element with a controller in Angular?

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related