AngularJs $ scope變量不變

Question

我的應用程序中有這樣的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卻發生了變化。 有人有什么想法嗎？ 我嘗試了很多方法來修復它...

Answer 1

您需要將其包裝在$apply因為您在angular外部的回調中：

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