Question

我使用angular-leaflet-directive，我想在单击标记时显示模板。我从Web服务器获取标记，并将它们本地存储在数组中。我创建标记的方式是：

＆＃13;

$rootScope.markers.push({
  lat: parseFloat(DeviceInfo[i].Position.Y),
  lng: parseFloat(DeviceInfo[i].Position.X),
  message: "<div ng-include src=\"'templates/markerTemplate.html'\"></div>",
  icon: {
    iconUrl: url,
    iconSize: [39, 39],
    iconAnchor: [19, 19],
    popupAnchor: [-19, -19]
  }
});

＆＃13;

位于for循环中，遍历DeviceInfoArray。

每个标记都在/templates/markerTemplate.html中显示模板。这是一个长文件，但它位于

之下

＆＃13;

 <div ng-controller="MarkerController">

＆＃13;

并且有一些{{values}}。

是否有某种方法可以绑定模板中的值或从rootScope或创建标记的控制器获取它们？

我不能按照教程中的说明使用ng-repeat，因为我创建的不同对象（不同的标记）比创建标记的控制器要多。我有一个服务返回DeviceInfo中的数据，但我不想在每次点击标记时查询它。

示例标记：

＆＃13;

marker1: {
  lat: 50,
  lng: 20,
  message: "<div ng-include src=\"'templates/markerTemplate.html'\"></div>",

  icon: {
    iconUrl: url,
    iconSize: [39, 39],
    iconAnchor: [19, 19],
    popupAnchor: [-19, -19]
  }
}

$scope.Devices[1].deviceData: {
  LastUpdate: "01/01/2015 12:14",
  Position: {
    X: 50,
    Y: 20
  },
  Speed: 30,
  DeviceIdentifier: "DeviceName1"
}

marker2: {
  lat: 55,
  lng: 25,
  message: "<div ng-include src=\"'templates/markerTemplate.html'\"></div>",

  icon: {
    iconUrl: url,
    iconSize: [39, 39],
    iconAnchor: [19, 19],
    popupAnchor: [-19, -19]
  }
}

$scope.Devices[2].deviceData: {
  LastUpdate: "02/23/2015 13:14",
  Position: {
    X: 55,
    Y: 25
  },
  Speed: 45,
  DeviceIdentifier: "DeviceName2"
}

＆＃13;

<div ng-controller="markerController">
  <font style="font-size:12px; font-weight:bold">{{deviceData.DeviceIdentifier}}</font>
  <table width="100%">
    <tbody>
      <tr>
        <td><strong>Speed: </strong>
        </td>
        <td>{{deviceData.Speed}} km/h</td>
      </tr>
      <tr>
        <td><strong>Update: </strong>
        </td>
        <td>{{deviceData.LastUpdate}}</td>
      </tr>
      <tr>
        <td colspan="2">
          <hr>
        </td>
      </tr>
    </tbody>
  </table>
  <div><strong>Location: </strong>{{deviceData.Location}} (X:{{deviceData.Position.X}}Y:{{deviceData.Position.Y}})
  </div>
</div>

＆＃13;

＆＃13; html是markerTemplate.html（我希望数据与设备[]的元素绑定的视图。

devices []是一个名为mapController（和rootScope）的控制器内的数组，包含我想要显示的所有数据。我希望上面的模板从这个数组的元素中获取值。

Answer 1

我认为你可以重构一下你的代码。在我看来，你不需要为每个标记添加一个新的控制器。所以，让我们说你有一个简单的控制器MyController和他的视图模板。所以你可以尝试这样的事情：

myController的：

$scope.markers.push({
  device: DeviceInfo[i],
  icon: {
    iconUrl: url,
    iconSize: [39, 39],
    iconAnchor: [19, 19],
    popupAnchor: [-19, -19]
  }
});

MyController的观点：

<div class="my-marker" ng-repeat="marker in markers">
  <b>{{marker.device.deviceData.DeviceIdentifier}}</b>
  <table>
    <tbody>
      <tr>
        <td><strong>Speed: </strong>
        </td>
        <td>{{marker.device.deviceData.Speed}} km/h</td>
      </tr>
      <tr>
        <td><strong>Update: </strong>
        </td>
        <td>{{marker.device.deviceData.LastUpdate}}</td>
      </tr>
      <tr>
        <td colspan="2">
          <hr>
        </td>
      </tr>
    </tbody>
  </table>
  <div><strong>Location: </strong>{{marker.device.deviceData.Location}} (X:{{marker.device.deviceData.Position.X}}Y:{{marker.device.deviceData.Position.Y}})
  </div>
</div>

CSS：

.my-marker b{
  font-size: 12px;
}
.my-marker table{
  width: 100%;
}

Answer 2

我刚刚遇到了你的问题，我面临着同样的问题。我所做的是在ng-src div中使用ng-init，并为每个标记指定一个特定的id，然后我可以使用它来从作用域中检索数据。例如：

message: "<div ng-init='post=" + post.id + "'id='marker-data' ng-include src=\"'../templates/marker-message.html'\"></div>"

其中post.id是唯一标识符。现在我只是在我的标记模板文件中使用这样的东西。

{{posts[post]}}

获取我的独特帖子

AngularJS将数据传递到模板视图

2 个答案: