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，或者说jqLite selecter。

如果您使用<div ng-controller="slideshow"></div>之类的内容，则可以使用：

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

此代码首先尝试找到有关您要使用angular.element访问的范围的正确DOM节点，然后通过scope()检索其范围，最后$apply在上下文中检索表达式范围。

你如何从javascript调用AngularJS函数？

2 个答案: