AngularJs $范围变化不会改变

我在我的应用程序，例如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); 
}); 
}])

$广播和$上的服务工作finem但是当我试图改变markerClicked事件是$ scope.image变量在视图页面上不会改变，但对于markersLoaded它会改变。有没有人有任何想法？我试过很多方法来解决它......

来源

2014-09-13 Alexander Smith

你需要用它里面$apply，因为你是在回调外角：

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

来源

2014-09-13 19:47:14 Wawy

AngularJs $范围变化不会改变

回答

相关问题