Как связать обработчик событий при компиляции HTML-фрагмента динамически в AngularJS

Question

Я использую OpenLayers с AngularJS, все идет хорошо, пока я не начал касаться всплывающей функциональности в конце концов.

Я знаю, как использовать $compile службу, чтобы динамическое содержимое отображается в всплывающем окне с помощью:

$scope.data = { 
    text: "Dynamic content" 
}; 

var template = "<div><span>{{data.text}}</span></div>"; 

$scope.showPopup = function() { 
    var content = $compile(template)($scope); 

    var lonlat = "-5694.06868525478, 6708925.0877411375"; 
    $timeout(function() { 
     var popup = new OpenLayers.Popup.FramedCloud("popup", 
      OpenLayers.LonLat.fromString(lonlat), 
      null, 
      content.html(), 
      null, 
      true 
     ); 

     map.addPopup(popup); 
    }, 0); 
}; 

, но теперь я боролся с обработчиком событий, если я изменю template к (обратите внимание на вход и ng-click после пролета):

var template = "<div><span>{{data.text}}</span><input type='button' ng-click='func()' value='click me'/></div>"; 

и определить обработчик событий в $scope:

$scope.func = function() { 
    console.log("Hello, world"); 
}; 

но событие не может быть вызвано. Я очень сомневаюсь, что использование content.html() потеряет важную информацию, которую интересует angularjs. Когда я попытался следующий код:

var template = "<div><span>{{data.text}}</span><input type='button' ng-click='func()' value='click me'/></div>"; 
    var content = $compile(template)($scope); 
    angular.element("#footer").append(content); 

этот фрагмент кода работает отлично, как и ожидалось (нг-клик работает и здесь). Единственное различие между этими двумя видами использования: content и content.html().

Но я не могу использовать content, поскольку OpenLayers.Popup.FramedCloud ожидает статическую строку содержимого html.

Любые идеи об этом? спасибо.

Answer 1

Я встречался с той же проблемой и провел 3 дня, чтобы найти решение. Наконец, я узнал, что решение состоит в том, чтобы вызвать функцию компиляции $ после того, как всплывающее окно добавлено на карту. Смотрите эту скрипку. Openlayers with Angularjs

var template = "<div><span>{{halo}}</span><button ng-click='call()'>call</button></div>"; 
var popup = new OpenLayers.Popup.FramedCloud("popup", new OpenLayers.LonLat(103.83641, 1.35578), null, template, null, true); 
map.addPopup(popup); 
var pp = angular.element(document.querySelector('#popup')); 
$compile(pp)($scope); 

После того, как всплывающее окно добавляется к карте, новый дом создается. Используя jqlite от Angularjs, мы можем получить dom и скомпилировать его с областью действия, чтобы привязать ее к методу, который вам нужно вызвать.

Answer 2

Я использую листовка

var map = L.map('div-map');      
// ...     

Создать Scope объект

var newScope = $scope.$new(); 

newScope.object = someObject; 

newScope.myfunction = function(){ console.log("Testing")} 

Ваш HTML Строка

var html = 
'<div><p><strong>ID : </strong>{{object.userId}}</p>'+ 
'<p><strong>Name : </strong>{{object.firstName}} {{object.lastName}}</p>'+ 
'<button class="btn btn-default" ng-click="myfunction()">Call My Function</button></div>'; 

Анализировать HTML в DOM элемент

var template = angular.element(html); 

Компиляция шаблону

var linkFn = $compile(template); 

Ссылка скомпилированный шаблон с областью.

var element = linkFn(newScope); 

var marker = L.marker(
    [ object.latitude, object.longitude], 
    {icon: -someIcon-} 
) 
.bindPopup(element[0]); 

map.addLayer(marker); 

Не забудьте ввести (код компиляции) в свой код.