AngularJs aktualisiert Sicht in Controller Ereignis-Listener

Question

In meiner App hole ich eine Liste von Objekten vom Server. Ich rende sie in einer linken Seitenleiste als Liste und auf der Karte (Prospekt) als Markierungen auf der gleichen Seite. Ich render Marker/Karte über Service und Sidebar-Liste über Controller und einfache Ansicht.

Wenn Benutzer auf das Element aus der Liste oder auf Marker von der Karte klickt ich Broadcast-Ereignis von $rootScope.

Benutzer klickt auf Sidebar Artikel -> dieser Code ausgelöst wird:

// in view 
<div ng-click="markerClicked(object)">...</div> 

// in controller 
$scope.markerClicked = function(object) { 
    $rootScope.$broadcast('markerClicked', object); 
}; 

Benutzer klickt auf Marker -> dieser Code ausgelöst wird:

angular.forEach(markers, function(object) { 
    var _marker = L.marker([object.longitude, object.latitude],{ 
     clickable: true 
    }); 

    _marker.on('click', function(e) { 
     $rootScope.$broadcast('markerClicked', object) 
    }); 

    _marker.addTo(service.map); 
    service.layer.addLayer(_marker); 
}); 

---

ich dieses Ereignis fangen nur in ein Controller:

// I also tried $rootScope.$on() 
$scope.$on('markerClicked', function(event, object) { 
    $scope.object = object; 
    $scope.hidden = false; 
    console.log('event fires'); 
}); 

$scope.hidden Hier ist ein Flag zum bedingten Rendern des modalen Fensters (Popup).

Das Problem hier ist, dass, wenn ich auf Sidebar Artikeln oder Markierung auf der Karte klicken, Konsolenprotokollen 'event fires' und andere Codezeilen wie gut funktionieren, ABER modale Fenster erscheinen nur, wenn ich auf Sidebar Element klicken.

Mit anderen Worten, wenn ich auf Markierung klicken I 'event fires' in dev Konsole bekommen, ich sehe, dass $scope.hidden-falseABER modale Fenster gleich tut erscheint nicht.

Wenn jemand ähnliches Problem begegnet, bitte zeigen Sie mir, was ich falsch mache.

---

Ich benutze Webpack, vielleicht ist das auch wichtig.

Answer 1

versuchen diese

$scope.$on('markerClicked', function(event, object) { 

    $scope.$apply(function(){ 
     $scope.object = object; 
     $scope.hidden = false; 
    }) 
    console.log('event fires'); 
});