AngularJS pass data to template view

Question

I'm using angular-leaflet-directive, and I want to display a Template when a marker is clicked. I'm getting the markers from a web server, and storing them locally in an array. the way that I'm creating the markers is:

$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]
  }
});

which is inside a for loop, that iterates over the DeviceInfoArray.

Every marker is displaying the template in /templates/markerTemplate.html . This is a long file, but it's under a

 <div ng-controller="MarkerController">

and has some {{values}}.

Is there some way to bind the values in the template or get them from the rootScope or the controller that creates the markers?

I can't use ng-repeat as instructed in the tutorial, because I'm creating different objects (different markers) than the controller creating the markers. I have a service returning the data in DeviceInfo, but I'd rather not query it every time a marker is clicked.

Example markers:

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"
}

<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>

The html is the markerTemplate.html (the view that I want to data bind with the elements of devices[].

devices[] is an array inside a controller called mapController (and the rootScope), and has all the data that I want to display. I want the above template to get values from the elements of this array.

Please show us two exemples of different objects/markers (from markerTemplate) and we show you how to use the ngRepeat correctly — manzapanza
– manzapanza, Commented Oct 16, 2015 at 12:00

manzapanza · Accepted Answer · 2015-10-16 12:36:40Z

2

I think that you could refactor a bit your code. In my opinion you don't need a include with a new controller for each marker. So let's say that you have a simple controller MyController and his view template. So you could try something like this:

MyController:

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

MyController's View:

<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%;
}

edited Oct 16, 2015 at 12:36

answered Oct 16, 2015 at 12:30

manzapanza

6,2914 gold badges43 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RaidenF Over a year ago

I would do that, but the problem is, that this view needs to be inside a marker's "message" field. As a result, I can't use ng repeat. It's just a single time that I want this info displayed, I just have many markers using this template. (or am I confused?) I'm trying to follow this: tombatossals.github.io/angular-leaflet-directive/examples/… (only the template marker interests me, not the static one), but I want to use data from the "MarkersAngularTemplateController" controller, not input. And it must be relative to each marker.

Usama Hameed · Accepted Answer · 2016-06-01 09:07:34Z

1

I just came across your question, and I was facing exactly the same problem. What I did was use ng-init in the ng-src div, and specify a specific id to each of the markers, which I was able to then use to retrieve data from the scope. E.g something like this:

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

Where post.id was the unique identifier. Now I just use something like this in my marker template file.

{{posts[post]}}

to get my unique post

answered Jun 1, 2016 at 9:07

Usama Hameed

111 silver badge2 bronze badges

Collectives™ on Stack Overflow

AngularJS pass data to template view

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related