标记 eventListener 未能给我我请求的对象

Question

我正在做一个应用程序，当我单击 google.map 上的标记时会触发一些操作，特别是我想从对象数组中获取一个对象以显示该对象的详细信息。

我像这样使用控制器定义

(function() {
 'use strict';

angular
   .module('gulpAngular')
   .controller('GeolocationController', GeolocationController);

/** @ngInject */
function GeolocationController(HouseList) {
....
}
})();

HouseList 是在别​​处定义的服务，并有一个名为 getHouses() 的方法

在我的控制器中，除了其他事情之外，我还会这样做：

var vm = this;
vm.houses = HouseList.getHouses();

然后我在地图上定义我的标记

allMarkers = new google.maps.Marker({....});

并像下面这样添加一个监听器。为简单起见，我指定 vm.house = vm.houses[0]

allMarkers.addListener('click', function() {
    vm.house = vm.houses[0]
}

现在我想我应该能够使用 vm.house 对象在我的 html 块中以

的方式显示这个房子对象的属性

<h4>{{vm.house.bedrooms}}</h4>

但是，没有显示任何内容。我应该看到我的 vm.house 对象被更新，这反映在 DOM 上，对吗？我错过了什么？

有趣的是：当我在 html 上添加一个简单的按钮并在其上使用 ng-click 功能时，除了说 console.log(vm.house) 之外没有其他任何东西，它不仅显示了正确的对象，而且还显示了刷新的 html 正在发生。我迷路了

谢谢 彼得

Answer 1

addListener 不是 Angular 函数，不会触发摘要循环。您需要手动完成。

例如：

allMarkers.addListener('click', function() {
    $scope.$apply(function () {
        vm.house = vm.houses[0]
    });
});

请注意，您需要为此注入$scope。

ng-click 触发摘要循环，这就是为什么使用它会更新 HTML。