Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite
1

I need to call a JavaScript method from angular.js when a sound ends. I want to call the check() function which is inside in the ready method.

app.controller("myCtrl",function($scope,ngAudio,$document)
    {
        $scope.audio;
        $scope.play=function(myAud)
        {
            $scope.audio = new Audio(myAud)
            $scope.audio.play();
            $scope.audio.onended=function()
            {
                console.log("called");
                $scope.audio = new Audio('aud1.mp3');
                $scope.audio.play();
                $scope.check();
            }
        }
        $scope.stop=function()
        {
            $scope.audio.stop()
        }
         $document[0].addEventListener("visibilitychange", function() {
        var doucmentHidden = document.hidden;
        if (doucmentHidden)
        {
            console.log("called");
            $scope.audio.pause();
        }
        else
        {
            console.log("called");
            $scope.audio.play();
        }
        }, false);
    });
    </script>
    <script>
        $(document).ready(function()
        {
            var aud= angular.element(document.getElementById('container')).scope();
             aud.play('aud.mp3');
                 function check()
                 {
                    console.log("called1");
                }
        });
    </script>

How can I trigger the check() function when I need to?

share|improve this question
    
Being new to angular, you should give this a read: stackoverflow.com/questions/14994391/…. It helped me a lot! – DelightedD0D Mar 31 '15 at 12:23
up vote 1 down vote accepted

As i see your check() function is in different script block and in a different scope. Instead you should put that in the controller's scope, so that it would be available to use:

    app.controller("myCtrl", function($scope, ngAudio, $document) {
      $scope.audio;
      $scope.check = function(){ // declare it here.
          console.log('check called on end.');
      };
      $scope.play = function(myAud) {
        $scope.audio = new Audio(myAud)
        $scope.audio.play();
        $scope.audio.onended = function() {
          $scope.check(); // now it can use the check function from the $scope
        }
      }
      $scope.stop = function() {
        $scope.audio.stop()
      }
      $document[0].addEventListener("visibilitychange", function() {
        var doucmentHidden = document.hidden;
        if (doucmentHidden) {
          console.log("called");
          $scope.audio.pause();
        } else {
          console.log("called");
          $scope.audio.play();
        }
      }, false);
    });
     // remove the script tags and put both in a same script block 
    $(document).ready(function() {
      var aud = angular.element(document.getElementById('container')).scope();
      aud.play('aud.mp3');
    });
share|improve this answer
    
Thanks !!!! it works :) – Vinoth kanna Mar 31 '15 at 12:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.