Ich bin neu in AngularJS. Ich habe einige Seiten über das Manipulieren von DOM in Direktive durchsucht, aber die meisten von ihnen manipulieren das DOM der Direktive selbst. Mein Problem ist, das DOM außerhalb der Direktive zu manipulieren.AngularJS manipulieren Eltern DOM in Direktive
In meinem Projekt befindet sich eine Google Map, und auf der Karte befinden sich Markierungen, um Ereignisse anzuzeigen. Was ich tun möchte, ist, dass die Anwendung die detaillierten Informationen des Ereignisses in einem Schieberegler anzeigen soll, wenn auf den Marker geklickt wird. Basierend auf dem folgenden Code besteht die Anforderung, wenn ich auf den Marker klicke, der updateMarkers() in directive auslöst, sollte er den Wert von {{detail}} in HTML ändern. Was ich jetzt mache, versuche "=" zu verwenden, um Direktiven Zugriff auf die Werte in seinem Controllerbereich zu geben, aber dieser Weg funktioniert nicht. Also bitte bieten Sie etwas Hilfe, wenn Sie wissen, danke.
HTML:
<div id="wrapper" >
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<app-map id="map" center="loc" markers="cities" details="details" show-detail="getDetails(directivedata)" on-init="gotoCurrentLocation(directiveData)"> </app-map>
</div>
<div>**********{{details}}</div>
</div>
</div>
</div>
Teil des Steuerpults:
app.controller("appCtrl", function ($scope, $http) {
$scope.nearbyEvent;
$scope.details = "something"; //should be changed when click markers in map
//code.....}
Richtlinie:
app.directive("appMap", ['$http', function ($http) {
return {
restrict: "E",
replace: true,
template: "<div></div>",
scope: {
center: "=", // Center point on the map (e.g. <code>{ latitude: 10, longitude: 10 }</code>).
markers: "=", // Array of map markers (e.g. <code>[{ lat: 10, lon: 10, name: "hello" }]</code>).
details: "=", //used for resend a REST api and store data in here
width: "@", // Map width in pixels.
height: "@", // Map height in pixels.
zoom: "@", // Zoom level (one is totally zoomed out, 25 is very much zoomed in).
mapTypeId: "@", // Type of tile to show on the map (roadmap, satellite, hybrid, terrain).
panControl: "@", // Whether to show a pan control on the map.
zoomControl: "@", // Whether to show a zoom control on the map.
scaleControl: "@", // Whether to show scale control on the map.
onInit: "&",
showDetail: "&"
},
link: function (scope, element, attrs) {
//some code.....
function updateMarkers() {
if (map && scope.markers.length > 0) {
window.alert("get me");
// clear old markers
if (currentMarkers != null) {
for (var i = 0; i < currentMarkers.length; i++) {
currentMarkers.setMap(null);
window.alert("get here1*****");
}
}
// create new markers
currentMarkers = [];
var markers = scope.markers;
function makeHappen(thi){
return function(){
scope.details = thi;
window.alert("***" + "in directive " + thi);
}
}
for (var i = 1; i < markers.length-1; i++) {
var m = markers[i];
if(m.venue == null || m.venue.lat == 0.0)
continue;
var loc = new google.maps.LatLng(m.venue.lat, m.venue.lon);
var eventName = m.description;
var mm = new google.maps.Marker({ position: loc, map: map, title: m.name, id: m.id, count: i});
mm.addListener('click', makeHappen(eventName), false);
currentMarkers.push(mm);
}
}
}
Ist es Detail oder Details? Ich kann sehen, dass beide benutzt werden. – Saad
Details, Entschuldigung. Ich weiß nicht, warum die Bearbeitung hier falsch ist. Aber in meinem Code werden alle Details im HTML- und JS-Teil genannt. Ich habe es hier schon geändert. Danke – tytan
Um den Wert der Parent-Scope-Variable zu ändern, die durch das Attribut 'details' definiert ist, setze einfach den Wert mit 'scope.details =' new value '; '. – georgeawg