2016-03-15 67 views
1

我無法拍圖控制器與角度的雙向數據綁定表達式綁定:角谷歌地圖 - 雙向數據在地圖控制

<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與我的問題。

有沒有辦法改變地圖控制中的綁定屬性?

感謝您的幫助:)

回答

0

爲了改變結合的屬性在地圖控制:

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

+0

感謝您的回答!但是,爲什麼我們需要創建一個單獨的控制器?這就像地圖控件創建了一個我們傳遞給它的控制器的新實例。 –

+0

在模板中創建控制器的原因是在控制器和模板之間共享相同的作用域 –