javascript - AngularJs $ scope变量不变

我的应用程序中有这样的Andularjs代码：

angular.module('FlickrMaps', ['SignalR'])
.factory('PhotoMarkers', ['$rootScope', 'Hub', function ($rootScope, Hub) {
    var PhotoMarkers = this;

    //Hub setup
    var hub = new Hub('photos', {
        listeners: {
            'addTotalPhotosCount': function (total) {
                PhotoMarkers.totalCount = total;
                $rootScope.$apply();
            },

            'initPhotoMarker': function (photo) {
                var photolocation = new window.google.maps.LatLng(photo.Latitude, photo.Longitude);
                var marker = new window.google.maps.Marker({
                    position: photolocation,
                    title: photo.Title,
                    photoThumb: photo.PhotoThumbScr,
                    photoOriginal: photo.PhotoOriginalScr
                });
                window.google.maps.event.addListener(marker, 'click', function () {
                    $rootScope.$broadcast('markerClicked', marker);
                });
                PhotoMarkers.all.push(marker);
                $rootScope.$apply();
            },

            'photosProcessed': function () {
                PhotoMarkers.processedPhotosCount++;
                if (PhotoMarkers.processedPhotosCount == PhotoMarkers.totalCount &&      PhotoMarkers.processedPhotosCount > 0) {
                    $rootScope.$broadcast('markersLoaded');
                }
                $rootScope.$apply();
            },
        },
        methods: ['loadRecentPhotos'],
        errorHandler: function (error) {
            console.error(error);
        }
    });

    //Variables
    PhotoMarkers.all = [];
    PhotoMarkers.processedPhotosCount = 0;
    PhotoMarkers.totalCount = 0;

    //Methods
    PhotoMarkers.load = function () {
        hub.promise.done(function () { //very important!
            hub.loadRecentPhotos();
        });

    };

    return PhotoMarkers;
}])
.controller('MapController', ['$scope', 'PhotoMarkers', function ($scope, PhotoMarkers) {
$scope.markers = PhotoMarkers;
$scope.image = '123';
$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
});
$scope.$on('markerClicked', function (event, data) {
    console.log(data.photoThumb);
    $scope.omfg = 'nkfglfghlfghflj';
});
$scope.$on('markersLoaded', function () {
    $('#myModal').modal('toggle');
    $scope.image = 'lol';
    var mapOptions = {
        zoom: 4,
        center: new window.google.maps.LatLng(40.0000, -98.0000),
        mapTypeId: window.google.maps.MapTypeId.TERRAIN
    };
    console.log(PhotoMarkers.all);
    $scope.map = new window.google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var markerCluster = new MarkerClusterer($scope.map, $scope.markers.all);
});
}])

$ broadcast和$ on服务工作正常，但是当我尝试在markerClicked事件上更改$ scope.image变量时，它在视图页面上没有更改，但是对于markersLoaded却发生了变化。有人有什么想法吗？我尝试了很多方法来修复它...

最佳答案

您需要将其包装在$apply内，因为您在angular外部的回调中：

window.google.maps.event.addListener(marker, 'click', function () {
    $rootScope.$apply(function() {
      $rootScope.$broadcast('markerClicked', marker);
    });
});