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？不行，因为我在两个不同的地方使用同一个控制器吗？我希望用户能够点击输入复选框，标记出现/消失。

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>

另外，将数据保存在可为两个控制器提供数据的共享服务中，并确保数据在两个地方都得更新。

ng-model到ui-gmap-marker

1 个答案: