BalloonContent для директивы AngularJS

Пост в архиве.

Юрий Г.

16 апреля 2015, 12:42

Суть темы в том, что при нажатии на placemark должен открываться balloon, в котором находится самописная директива angular, в которой находится моя html-разметка.

Если просто написать

marker.properties.set('balloonContent', "<mydirective></mydirective>");

то balloon открывается пустой.

Тогда я использовал:

var contentString = '<mydirective></mydirective>';
var compiled = $compile(contentString)(scope);

После чего

marker.properties.set('balloonContent', compiled[0].innerHTML);

Разметка показывается правильно, и с нужными данными, но вот обработка нажатия на кнопку ng-click внутри моей директивы, не срабатывает, потому что compiled[0].innerHTML теряет двустороннее связывание данных angular'а.

Вместо этого надо использовать

marker.properties.set('balloonContent', compiled[0]);

Но тогда возникает другая проблема: в balloon не подставляется моя директива, а пишется [object HTMLDivElement].

Как мне в balloon вставить мою директиву, чтобы и разметка подставлялась и чтобы двустороннее связывание работало?

5 комментариев

Авторизуйтесь, чтобы оставить комментарий

Sergey Konstantinov

27 января 2016, 22:50

Так же, как и в любой другой динамически генерируемый элемент.

Юрий Г.

27 января 2016, 22:50

Можно ли подробнее? Ваш ответ ничем не помогает пока)

К примеру в google maps infowindow.setContent(compile[0]) срабатывает на ура.

Sergey Konstantinov

27 января 2016, 22:50

Я понятия не имею, как решить эту задачу в Ангуляре. Я просто говорю, что контент балуна ничем не отличается от любой другой динамически генерируемой дом-ноды.

Возможно, сработает задание собственного макета балуна.

MyContentLayout = ymaps.templateLayoutFactory.createClass('', {
build: function () {
MyContentLayout.superclass.build.call(this);
this.getParentElement().appendChild(compiled[0]);
},
clear: function () {
// А здесь надо как-то почистить скомпилированный html
}
});

marper.options.set('balloonContentLayout', MyContentLayout);

iamlnu

1 сентября 2016, 15:33

У меня похожая проблема.
Мне удалось поместить angular директиву внутрь balloon, но не получается обновить размер балуна.
В балуне видна только одна строка, хотя их там около шести, это можно увидеть в консоли $('[my-balloon]')
https://jsfiddle.net/lnudev/x0spzzuc/

naook

5 января 2018, 18:10

Столкнулся с такой же проблемой: нужно как-то прокинуть колбэк на ng-click в balloonContentFooter. Может ли как то помочь $sanitize?