Клуб API Карт

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

YG-92
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 вставить мою директиву, чтобы и разметка подставлялась и чтобы двустороннее связывание работало?

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

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

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

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

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

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

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