Question

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

当用户点击列表中的项目或地图上的标记时，我会从$rootScope广播事件。

用户点击侧边栏项目 - ＆gt;此代码被触发：

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

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

用户点击标记 - ＆gt;此代码被触发：

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这是条件渲染模态窗口（弹出窗口）的标志。

这里的问题是，每当我点击侧边栏项目或地图标记时，控制台日志'event fires'和其他代码行也会起作用，但是仅当我单击侧栏项目时才会出现模态窗口。

换句话说，当我点击标记我在开发控制台中得到'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');
});

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

1 个答案: