如何從javascript調用AngularJS函數？

Question

我試圖在if語句之后從我的Javascript調用AngularJS方法advanceSlide（），但是，這一行：

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

似乎沒有用。 這是完整的代碼。

使用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 );
        }
    }   
);

Answer 1

您需要應用更改

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

試試看

Answer 2

不知道您的HTML怎么樣，但是似乎問題出在與所選DOM有關，或者說與jqLit​​e選擇器有關。

如果您使用的是<div ng-controller="slideshow"></div> ，則可以使用：

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

這段代碼首先嘗試使用angular.element找到與您要訪問的范圍有關的正確DOM節點，然后通過scope()檢索其范圍，最后在該范圍的上下文中$apply一個表達式。