javascript - AngularJs 更新 Controller 事件监听器中的 View

Question

在我的应用程序中，我从服务器获取对象列表。我将它们呈现在左侧边栏上作为列表，并在 map (传单)上呈现为标记在同一页面上。我通过服务渲染标记/ map ，通过 Controller 和简单 View 渲染侧边栏列表。

当用户单击列表中的项目或 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);
});

<小时/>

我仅在一个 Controller 中捕获此事件:

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

$scope.hidden 这里是一个用于条件渲染模式窗口(弹出窗口)的标志。

这里的问题是，每当我单击侧边栏项目或 map 标记时，控制台都会记录“事件触发”并且其他代码行也可以工作，但是仅当我单击侧边栏项目时才会出现模式窗口。

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