[英]Angular Google Maps - Two-way data binding in map-control
I'm having trouble making a map-controller with Angular's two-way data binding expressions: 我在使用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>
Here is a Plunker with my problem. 这是一个我的问题的Plunker 。
Is there a way to change the binded attribute in the map-control? 有没有办法改变地图控件中的绑定属性?
Thanks for the help :) 谢谢您的帮助 :)
In order to change the bound attribute in the map-control: 为了更改map-control中的bound属性:
1) introduce a separate controller for the template to share its scope with another controller: 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) Broadcast changes: 2)广播变更:
$scope.$watch('controlText', function () {
$rootScope.$broadcast('controlText:changed', $scope.controlText);
});
3) Receive changes in template controller: 3)在模板控制器中接收更改:
.controller('templateCtrl', function ($scope) {
$scope.$on('controlText:changed', function(event, val) {
$scope.controlText = val;
});
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.