AngularJS將數據傳遞給模板視圖

Question

我正在使用angular-Leaflet-directive，並且我想在單擊標記時顯示模板。我從Web服務器獲取標記，並將它們本地存儲在一個數組中。我要創建標記的方法是：

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

這裏面是一個循環，即在DeviceInfoArray迭代。

每個標記都在/templates/markerTemplate.html中顯示模板。這是一個長的文件，但它的下

<div ng-controller="MarkerController">

，並有一些{{值}}。

是否有某種方法來綁定模板中的值或從rootScope或創建標記的控制器獲取它們？

我不能按照教程中的說明使用ng-repeat，因爲我創建了不同的對象（不同的標記），而不是創建標記的控制器。我有一個服務返回DeviceInfo中的數據，但我不希望每次點擊標記時都會查詢它。

實施例的標記：

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>

的HTML是markerTemplate.html（即我想使用設備[]的元素的數據綁定的視圖

設備[]是一個。數組在一個名爲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]}} 

讓我的獨特後