Angular Google 地图 - 地图控制中的双向数据绑定

Question

我在使用 Angular 的双向数据绑定表达式制作地图控制器时遇到问题：

<script type="text/ng-template" id="control.tpl.html">
    <button class="btn btn-sm btn-primary" ng-class="{'btn-warning': danger}" ng-click="controlClick()"><h1>{{controlText}}</h1></button>
</script>

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
    <ui-gmap-map-control template="control.tpl.html" position="center" controller="controlCtrl" index="-1"></ui-gmap-map-control>
</ui-gmap-google-map>

<div ng-controller="controlCtrl">
    <h1>{{controlText}}</h1>
    <label>Two-way Data Binding:</label>
    <input ng-model="controlText">
</div>

这是 Plunker 我的问题。

有没有办法改变地图控件中的绑定属性？

感谢您的帮助:)

Answer 1

为了更改地图控件中的绑定属性：

1) 为模板引入一个单独的控制器以与另一个控制器共享其范围：

<script type="text/ng-template" id="control.tpl.html">
    <div ng-controller="templateCtrl">
       <button class="btn btn-sm btn-primary" ng-class="{'btn-warning': danger}" ng-click="controlClick()"><h1>{{controlText}}</h1></button>
    </div>   
</script>

2) 广播更改：

$scope.$watch('controlText', function () {
         $rootScope.$broadcast('controlText:changed', $scope.controlText);
});

3) 在模板控制器中接收更改：

.controller('templateCtrl', function ($scope) {
    $scope.$on('controlText:changed', function(event, val) {
       $scope.controlText = val;
    }); 
})

Plunker

Angular Google 地图 - 地图控制中的双向数据绑定

Angular Google Maps - Two-way data binding in map-control

javascript

google-maps

angularjs

angular-google-maps