2014-10-21 2 views
0

Я использую листовки с угловыми и хотел бы сделать кнопку, которую можно щелкнуть в всплывающем окне сообщения. Я знаю, что мне нужно скомпилировать HTML, но я не могу заставить его работать в моем случае, так как я не нашел пример с json-request.Угловой маркер маркера щелчка

Любой намек приветствуется!

$http.get(searchterm).then(function(articlesResponse) { 

     $scope.geonamesorte = articlesResponse.data; 

     var meineMarker = {}; 

     for (var i = 0; i < $scope.geonamesorte.length; i++) { 
      var ortObjektausListe = $scope.geonamesorte[i]; 

      var myobjectname = ortObjektausListe.name.replace(/[^a-zA-Z0-9]/g,'_'); 
      ortlat = parseFloat(ortObjektausListe.lat); 
      ortlng = parseFloat(ortObjektausListe.lng); 

      meineMarker[myobjectname+i] = { 
        lat: ortlat, 
        lng: ortlng, 
        message: "<span><a href='' ng-click='dosomething()''>info</a></span>", 
        focus: false, 
        draggable: false 
       }; 

     } 

     // Marker on map 
     angular.extend($scope, { 
      markers: meineMarker, 
      defaults:{ 
       tileLayer:"http://tile.stamen.com/toner-lite/{z}/{x}/{y}.png" 
      } 
     }); 

    }); 
+0

На ваш вопрос? – Celeo

ответ

0

включают в себя услугу $ компиляции в контроллер затем написать:

meineMarker[myobjectname+i] = { 
        lat: ortlat, 
        lng: ortlng, 
        message: $compile("<span><a href='' ng-click='dosomething()''>info</a></span>")($scope), 
        focus: false, 
        draggable: false 
       }; 

DoSomething() должны быть определены на текущей области

+0

К сожалению, браузер зависает, и я получаю эту ошибку: [$ rootScope: infdig] Достигнуто 10 дайджеста(). Aborting! У меня есть этот контроллер: mytestapp.controller ('KarteCtrl', ['$ scope', '$ log', '$ http', '$ compile', 'leafletData', 'leafletEvents', 'leafletBoundsHelpers', функция ($ scope , $ log, $ http, $ compile, leafletData, leafletBoundsHelpers, leafletEvents) { –

1

Хорошо, нашел решение здесь: angular-leaflet-directive custom message html with angular directives in marker popup. How to?

Но немного изменил его:

var myobjectname = 'meinort'; 

    var meineMarker = {}; 
     meineMarker[myobjectname] = { 
        lat: 0, 
        lng: 0, 
        name: 'testname', 
        message: "<span><a href='' ng-click='dosomething()'>info</a></span>", 
        focus: false, 
        draggable: false 
       }; 

$scope.$on('leafletDirectiveMarker.click', function(e, args) { 
      // Args will contain the marker name and other relevant information 
      console.log(args); 
      var markerName = args.leafletEvent.target.options.name; //has to be set above 
      var $container = $(args.leafletEvent.target._popup._container).find('.leaflet-popup- content'); 
      $container.empty(); 
      var html = "<p> I am "+markerName +" " + args.leafletEvent.target._popup._content + "</p>", 
       linkFunction = $compile(angular.element(html)),    
       linkedDOM = linkFunction($scope); 
      $container.append(linkedDOM); 
     }); 
Смежные вопросы