AngularJs 在控制器的事件侦听器中更新视图

Question

在我的应用程序中，我从服务器获取对象列表。我将它们呈现在左侧栏中作为列表，并在地图（传单）中呈现为标记 在同一页面上 。我通过控制器和简单视图通过服务和侧边栏列表呈现 markers/map。

当用户点击列表中的项目或地图中的标记时，我从 $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);
});

我只在一个控制器中捕捉到这个事件：

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

$scope.hidden 这是一个用于条件渲染模态 window（弹出窗口）的标志。

这里的问题是，每当我点击侧边栏项目或地图标记时，控制台日志 'event fires' 和其他代码行也能正常工作，但是模态 window 仅在我单击侧边栏项目时出现。

换句话说，当我点击标记时，我在开发控制台中得到 'event fires'，我看到 $scope.hidden 等于 false BUT模态window没有出现。

如果有人遇到过类似的问题，请指出我做错了什么。

我用的是webpack，也许这也很重要。

Answer 1

试试这个

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

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

AngularJs 在控制器的事件侦听器中更新视图

AngularJs updating view in controller's event listener

javascript

openstreetmap

angularjs

leaflet

webpack