Basically, I have an array of strings that contain .mp3's that I would like to play using [ngAudio][1], a custom directive. I figured a good way of doing this would be to assign an id to each button, pass the id into a function that then checks for the passed array index for the string that contains the mp3 that will be played.
However, I can not get this to work. Here is my HTML:
<button id=0 type="button" class="btn btn-primary" ng-click="setSound(id) ; sound.play()">Sound 1</button>
(sound.play() is from ngSound, it is just a function to play the loaded sound) I've also tried: Sound 1 (where id="0" instead of id=0)
And my angularJS:
myApp.controller('mainCtrl', ['$scope', 'ngAudio', function($scope, ngAudio) {
var allSoundBites = [
'resources/audio/test.mp3'
];
$scope.setSound = function(id) {
alert(id);
$scope.sound = ngAudio.load(allSoundBites[id]);
};
}])
It works fine if instead of doing
ng-click="setSound(id)"
I do
ng-click="setSound(0)"
But in theory shouldn't that be what is passed anyway?
EDIT: After looking at this problem again I realize that really this is pletely meaningless as it would actually take less code to just pass the number into the function in the first place and not use ID...
... STILL, curious as to why this doesn't work.
[1]:
Basically, I have an array of strings that contain .mp3's that I would like to play using [ngAudio][1], a custom directive. I figured a good way of doing this would be to assign an id to each button, pass the id into a function that then checks for the passed array index for the string that contains the mp3 that will be played.
However, I can not get this to work. Here is my HTML:
<button id=0 type="button" class="btn btn-primary" ng-click="setSound(id) ; sound.play()">Sound 1</button>
(sound.play() is from ngSound, it is just a function to play the loaded sound) I've also tried: Sound 1 (where id="0" instead of id=0)
And my angularJS:
myApp.controller('mainCtrl', ['$scope', 'ngAudio', function($scope, ngAudio) {
var allSoundBites = [
'resources/audio/test.mp3'
];
$scope.setSound = function(id) {
alert(id);
$scope.sound = ngAudio.load(allSoundBites[id]);
};
}])
It works fine if instead of doing
ng-click="setSound(id)"
I do
ng-click="setSound(0)"
But in theory shouldn't that be what is passed anyway?
EDIT: After looking at this problem again I realize that really this is pletely meaningless as it would actually take less code to just pass the number into the function in the first place and not use ID...
... STILL, curious as to why this doesn't work.
[1]:
Share Improve this question edited Jul 10, 2015 at 2:57 Ajv2324 asked Jul 10, 2015 at 2:52 Ajv2324Ajv2324 5228 silver badges24 bronze badges 5- Where does this ID e from? – Fals Commented Jul 10, 2015 at 2:55
- Is ID not just something you can set for a button? – Ajv2324 Commented Jul 10, 2015 at 2:56
-
2
Presumably this is in an
ng-repeat
of each element inallSoundBites
? Why not just pass the actual element into a function, eg$scope.play = function(sound) { ngAudio.load(sound).play() }
– Phil Commented Jul 10, 2015 at 2:59 -
1
Looks like you're trying to reference the html attribute value
id
. That's not how angular works. The attribute values are not auto-bound to the scope. – logee Commented Jul 10, 2015 at 3:04 - shouldnt you deligate the DOM stuff to directive? – Pravin Commented Jul 10, 2015 at 3:46
3 Answers
Reset to default 5Problem
When you have id
as a parameter, it's looking for $scope.id
, but it doesn't exist.
One option would be to read the element's id with $event
, but if you're using the $scope
method elsewhere it could be annoying, and in any case, it's a level of coupling noone needs.
Suggested Solution
I'm going to make an assumption here, which is that id
is being set by an ng-repeat
as speculated in the ments. If that's the case, you could do something like this:
Controller
myApp.controller('mainCtrl', ['$scope', 'ngAudio', function($scope, ngAudio) {
$scope.allSoundBites = [
{name: 'Sound 1', path: 'resources/audio/test.mp3' }
];
$scope.setSound = function(path) {
$scope.sound = ngAudio.load(path);
};
}]);
Template
<button ng-repeat="soundBite in allSoundBites" id="sb-{{$index}}"
class="btn btn-primary" ng-click="setSound(soundBite.path); sound.play();">
{{soundBite.name}}
</button>
Option 1 Button 1
If you dont have ng-repeat i.e only one button you can use ng-init
Option 2 Button 2 & 3
If you are using ng-repeat i.e multiple buttons, you can use $index similar to @scarl3tt solution.
Here is the JS FIDDLE
<div ng-app="clicker" ng-controller="mainCtrl" ng-init="id=0">
{{test}}
<button id=id type="button" class="btn btn-primary" ng-click="setSound(id)">Sound 1</button>
<br>
<button ng-repeat="button in buttons" id={{$index}} type="button" ng-click="setSoundOther($index)" >{{button.btnName}}</button>
If I ain't wrong, you have ng-repeat and inside it you have above button.
You have to track items by its index (it's special scope property) pass it to function.
other way would be you can add the id property inside to each iterm in your array and then pass item.id to your function.
It will be great if you can share the fiddle or punter demo.
Let me know if I misunderstood your problem.