How to call a javascript object from a partial

Question

I have a partial with the following fragment

<div id="playDiv" ng-show="audioAvailable">
    <br/>
    <button play-pause-toggle data-play="Play" data-pause="Pause">Play</button>
    <button ng-click="soundManager.sounds[soundManager.soundIDs[0]].play()">Play</button>
</div>

I'm resolving an issue where the play-pause-toggle directive from the angular-soundmanager2 library is failing to work. It does work the first time I load the page. If I load a second sound I have code that remove other sounds. This removes the other sounds but the new sound does not play. If I run the code within ng-click within the console the sound plays ... and after I play the sound from the console the play-pause-toggle button works again.

How do I make the ng-click directive call soundManager.sounds[soundManager.soundIDs[0]].play()?

Here is the controller code that is clearing old sounds.

angular.module('infosystem',['angularSoundManager']).controller("insightsDetailCtrl", function ($scope, $stateParams, $rootScope, $http, $sce) {

        var debug = true ;

        SC.initialize({
        client_id: "YOUR_SOUNDCLOUD_CLIENT_ID"
        });

        if ( !$rootScope.soundManagerObjects ) {
            $rootScope.soundManagerObjects = [] ;
        }

        function soundManagerIdCheck(id){
            var result = false ;
            if ( soundManager ) {
                var sound = soundManager.getSoundById(id) ;
                if ( sound ) {
                    result = true ;
                }
            }
            return result ;
        }

    function asyncLoop(o) {
        var i = -1;
        var loop = function() {
            i++;
            if(i == o.length) {
                              o.callback();
                return;
            }
            o.functionToLoop(loop, i);
        };
        loop(); //init
    }


        $scope.loading_insights = true;
    $scope.load_insight = function (insight_id) {
        $scope.loading_insights = true;
        $http({
            method: 'GET',
            url: $rootScope.serverURL + 'insights/' + insight_id,
            headers: {
                'Accept': 'application/json'
            }
        })
                .success(function (data) {
                    $scope.loading_insights = false;
                    data.description=$sce.trustAsHtml(data.description);
                    data.audio=$sce.trustAsHtml(data.audio);
                    $scope.insight = data;

                                        $rootScope.audioAvailable = false ;

                                        if ( data.soundcloud_track ) {

                                            SC.stream( '/tracks/' + data.soundcloud_track.id , function( sm_object ){

                                          var track = {
                                                    id: data.soundcloud_track.id,
                                                    title: data.soundcloud_track.title,
                                                    artist: data.soundcloud_track.artist,
                                            url: sm_object.url
                                          };

                                                $rootScope.audioAvailable = true ;
                                                $rootScope.smId = sm_object.id ;
                                            var smIdsLength = soundManager.soundIDs.length;

                                            asyncLoop({
                                                length: smIdsLength,
                                                functionToLoop: function(loop, i) {
                                                    setTimeout(function() {
                                                        //custom code
                                                                        var soundManagerId = soundManager.soundIDs[0] ;
                                                                        if ( soundManagerIdCheck(soundManagerId)){
                                                                            soundManager._wD('soundManager.stop(' + soundManagerId + ')', 1);
                                                                        }

                                                        if ( soundManagerId ) {
                                                                            if ( $rootScope.smId != soundManagerId) {
                                                                                soundManager.destroySound(soundManagerId);
                                                                            }
                                                                        }
                                                        //custom code
                                                        loop();
                                                    }, 100);
                                                },
                                    callback: function() {
                                        //callback custom code

                                        //callback custom code
                                    }
                                              }
                                            );




                                            }) ;                                        

                                        }
                })
                .error(function (error) {
                    $scope.loading_insights = false;
                })
    }
    $scope.load_insight($stateParams.insight_id);
})

Answer 1

Have it in a function which will reside in scope of controller and try calling your code soundManager.sounds[soundManager.soundIDs[0]].play()

hope this will help.

Answer 2

It dawned on me to add a function to the $scope and call that.

I added the following code to the controller.

    $scope.playFirstSoundManagerSound = function() {
        soundManager.sounds[soundManager.soundIDs[0]].play()
    }

and changed the partial to

<div id="playDiv" ng-show="audioAvailable">
    <br/>
    <button ng-click="playFirstSoundManagerSound()">Play</button>
</div>