How do you call an AngularJS function from javascript?

Question

I am trying to call the AngularJS method advanceSlide() from my Javascript after the if statement, however,this line:

angular.element(document.getElementById('FotoSpill')).scope().advanceSlide();

doesn't seem to be working. Here is the full code.

Javascript

    window.onload = function() {
    cast.receiver.logger.setLevelValue(0);
    window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
    console.log('Starting Receiver Manager');

    // handler for the CastMessageBus message event
    window.messageBus.onMessage = function(event) {
      console.log('Message [' + event.senderId + ']: ' + event.data);
      // display the message from the sender
      displayText(event.data);
      if (event.data == "quit") {
        angular.element(document.getElementById('FotoSpill')).scope().advanceSlide();
      };
      // inform all senders on the CastMessageBus of the incoming message event
      // sender message listener will be invoked
      window.messageBus.send(event.senderId, event.data);
}

ANGULARJS

var FotoSpill = angular.module('FotoSpill', []);
FotoSpill.config(['$routeProvider', '$locationProvider', function( $routeProvider,     $locationProvider ) {$routeProvider.when('/tag/:tag');}]);
FotoSpill.controller('slideshow', function ( $scope, $http, $timeout, $route, $location ) {
        // Set the API endpoint
        var api = 'https://api.instagram.com/v1/locations/436022/media/recent?access_token=257058201.9af4692.3d68e63b114944a0be332da732923a23&callback=JSON_CALLBACK',
            newReq, refreshApi;
        var seconds = 1000;


        $scope.fetchImages = function() {

            $scope.loadingClass = 'loading';
            $scope.imgCurrent = 0;


            // if ( ! $route.current )
            //  $location.path( '/tag/' + $scope.tag );
            // else if ( angular.isDefined( $route.current.params.tag ) )
            //  $scope.tag = $route.current.params.tag;

            $http.jsonp( 
                api.replace( '%tag%', $scope.tag )
            ).success( function( data ) {
                delete $scope.loadingClass;

                $scope.images = data.data;

                // Set the first image active
                if ( data.data.length )
                    $scope.makeActiveSlide( $scope.imgCurrent );

                // Cancel the previous update request
                if ( refreshApi )
                    $timeout.cancel( refreshApi );

                // Check for new images on every loop
                if ( data.data.length )
                    refreshApi = $timeout( $scope.fetchImages, 60*seconds );
            }).error( function() {
                delete $scope.loadingClass;
                refreshApi = $timeout( $scope.fetchImages, 2*seconds );
            });
        }

        // Fetch images
        $timeout( $scope.fetchImages );

        $scope.advanceSlide = function() {
            // Method 1
            // Use a classname to highlight the current active slide
            if ( angular.isDefined( $scope.images ) && $scope.images.length )
                $scope.makeActiveSlide( $scope.imgCurrent + 1 );


            $timeout( $scope.advanceSlide, 6*seconds );  //time between slide transition
        }

    }
).filter(
    'escape', function () {
        return function( input ) {
            return escape( input );
        }
    }   
);

In your jqLite code, there seems no way to know which scope you are trying to retrieve, right? — Tong Shen
– Tong Shen, Commented Jun 3, 2014 at 4:03

Dayan Moreno Leon · Accepted Answer · 2014-06-03 00:34:23Z

1

you need to apply your changes

angular.element(document.getElementById('FotoSpill')).scope().$apply('$scope.advanceSlide()');

try that

answered Jun 3, 2014 at 0:34

Dayan Moreno Leon

5,4552 gold badges25 silver badges24 bronze badges

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

2 Comments

Tong Shen Over a year ago

@user3692831 This should work if you get the correct DOM element. Something like this: angular.element('[ng-controller=slideshow]').scope().$apply('advanceSlide()');

Dayan Moreno Leon Over a year ago

well yes that would definitively do it, the problem is that would execute the function on every controller called slideshow in the page and that might not be desired

Tong Shen · Accepted Answer · 2014-06-03 04:12:58Z

Don't know how is your HTML, but it seems the problem is about the DOM selected, or say, jqLite selecter.

If you are using something like <div ng-controller="slideshow"></div>, you can use:

angular.element('[ng-controller=slideshow]').scope().$apply('advanceSlide()');

This code first try to find the correct DOM node regarding the scope you want to access with angular.element, then retrieve its scope through scope(), finally $apply a expression in the context of the scope.

Collectives™ on Stack Overflow

How do you call an AngularJS function from javascript?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related