ng-model 到 ui-gmap-marker

Question

我需要帮助才能将 ng-model 指令与 ui-gmap-marker 结合使用。我的示例 app.js 是：

// DevicesController
$scope.devices = {
   id: 1,
   center: { latitude: X, longitude Y },
   options: {
       show: true,
       name: 'device 1',
       radius: 100 
   }
   (...)
}

我的index.html是：

  <ul ng-controller="DevicesController">
      <li ng-repeat="d in devices">
           <input type="checkbox" ng-model="d.options.show">
           <span>{{ d.options.name }}</span>
      </li>
  </ul>
  (...)

  <div id="map_canvas" ng-controller="DevicesController">
      <ui-gmap-marker 
          ng-repeat="d in devicesMarkers track by d.id" 
          idkey="d.id"
          coords="d.center"
          ng-model="d.options.show">
      </ui-gmap-marker>
 (...)

如何使用 ng-model？不起作用，因为我在两个不同的地方使用同一个控制器？我希望用户能够单击输入复选框和标记 appear/disappear.

Answer 1

我建议简单地将两个 div 包装在同一个控制器中，而不是为它们提供单独的控制器。

标记

<div ng-controller="DevicesController">
  <ul>
      <li ng-repeat="d in devices">
           <input type="checkbox" ng-model="d.options.show">
           <span>{{ d.options.name }}</span>
      </li>
  </ul>
  (...)

  <div id="map_canvas">
      <ui-gmap-marker 
          ng-repeat="d in devicesMarkers track by d.id" 
          idkey="d.id"
          coords="d.center"
          ng-model="d.options.show">
      </ui-gmap-marker>
 </div>
 (...)

</div>

否则在共享服务中维护数据，该服务将向两个控制器提供数据并确保数据应在两个地方更新。