コントローラのイベントリスナーのAngularJs更新ビュー

Question

私のアプリでは、サーバーからオブジェクトのリストを取得します。左側のサイドバーにリストとして、地図（リーフレット）にマーカーを同じページにレンダリングします。 コントローラと簡単なビューを使って、サービスとサイドバーのリストを使ってマーカー/マップをレンダリングします。

ユーザーがリストからアイテムをクリックするか、地図のマーカー上で、私は$rootScopeからイベントをブロードキャストします。

ユーザーは、サイドバーの項目をクリック - >このコードがトリガーされます。マーカーの

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

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

ユーザーのクリックを - >このコードがトリガーされます。

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); 
}); 

---

私は、このイベントだけでをキャッチ1つのコントローラ：

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

$scope.hiddenここには、モーダルウィンドウ（ポップアップ）を条件付きでレンダリングするためのフラグがあります。

ここでの問題は、私はサイドバーのアイテムやマップのマーカーをクリックしたときにということであるコンソールログ'event fires'およびその他のコード行は、同様に動作し、しかし モーダルウィンドウは、私は、サイドバーの項目をクリックする場合にのみ表示されます。言い換えれば

、私はマーカーをクリックしたときに私がDEVコンソールで'event fires'を取得し、私は$scope.hiddenは、モーダルウィンドウが表示されていませんfalseに等しいしかしことがわかります。

誰かが似たような問題を抱えている場合は、私が間違っていることを指摘してください。

---

私はwebpackを使用していますが、多分これも重要です。

Answer 1

この

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

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