Регулирующий поток Angularjs от директивы к контроллеру назад к директиве

Question

Я пытаюсь обойти проблему, используя углы и буклеты вместе. Но этот общий вопрос навлек на меня какое-то время, поэтому обходной путь - хорошее начало: «Я даже делаю это правильно с угловой точки зрения?»

Проблема:

Я использую карту листовки, и я хотел бы использовать его всплывающие окна, чтобы отобразить дополнительные данные о своих точках на карте. Я намереваюсь отображать много точек на карте. Что много? Достаточно того, что, когда я запрашиваю сервер для точек, я получаю только идентификатор (используемый позже для получения большего количества данных) и геометрии (так что я могу построить точку). В «щелчке» точки, в которой я хотел бы обратиться к серверу, чтобы получить все данные, связанные с этой конкретной точкой, и отобразить их во всплывающем окне.

У меня есть угловая директива, которая управляет всеми вещами в DOM, которые связаны с листингом (директиву листовки). Эта директива - это то, что слушает такие вещи, как «щелчок» по точке. Когда это происходит, моя директива возвращается к контроллеру, этот контроллер затем запрашивает сервер для данных о точке и заполняет переменную области видимости, чтобы шаблон HTML мог «заполнить» данные.

Несколько вопросов здесь: 1. Должны ли директоры переходить к контроллерам для получения данных, которые затем запрашивает директива? 2. Мой призыв к директиве, кажется, как взломать, как я должен получить объем, если «просто скомпилированных» элемент в том, что чувствует, как взломать:

angular.element(e).scope().getContent(); 

На этой проблеме. Листовка не понимает, что HTML обновлен сразу после всплывания. Это вызывает проблему ширины, поскольку всплывающее окно недостаточно широко, чтобы соответствовать тексту. Вот звенеть:

http://plnkr.co/edit/53bebb?p=preview

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

var newScope = $scope.$new(); 
    var e = $compile('<div popup></div>')(newScope); 

    // don't bind yet, size problem 
    //marker.bindPopup(e[0]); 

    // listen for the click, then get data from server to fill in template 
    marker.on('click', function() { 
    angular.element(e).scope().getContent(); 
    }); 

    newScope.$watch("content", function(content) { 
    if (!content) return; 
    // now bind and open the popup as we should already have the content 
    marker.bindPopup(e[0]).openPopup(); 
    } 

Однако это не совсем работа, как newScope не совсем сфера для контроллера, который имеет функцию «getContent()».

Наконец, даже если это действительно работало, вероятно, это не очень хорошее решение, потому что позволяет просто сказать, что мой сервер работает медленно и занимает 3 секунды, чтобы вернуть данные. Это означает, что я даже не покажу всплывающее окно в течение 3 секунд после щелчка, что является ужасным пользовательским интерфейсом.

Единственное, что у меня осталось, - это изменить размер всплывающего окна листовки самостоятельно, даже не знаю, с чего начать, или если это хорошая идея.

Приветствуется и приветствуется любая помощь и критика (с вопросом об изменении размера и угловом использовании).

Заранее спасибо.

Answer 1

В моем решении я разрешаю службе иметь доступ к маркерам, которые находятся на карте, и другой службе, которая связывается с бэкэнд для контента.

Служба, которая обращается к маркеру, позволяет мне добавить директиву для всплывающего окна и привязать ее к маркеру. В директиве popup может содержаться дополнительная информация, которая заполняется полученными данными.

Служба получения контента работает с использованием обещания, которое разрешается с данными при возврате бэкэнд. Я просто использовал $ timeout, но вы будете использовать $ http.

Всплывающее окно связывается с маркером (при необходимости, с некоторыми элементами по умолчанию) и ждет содержимого.

map_service.marker.bindPopup(pop); 
map_service.marker.on('click', function() { 
    content.GetData().then(function(data) { 
     pop.setContent(data); 
    }); 
}); 

Теперь я только что вернулся HTML с тайм-аут, но, вероятно, вы будете использовать либо обещание внутри содержимого или связать возвращаемые данные в области, чтобы обновить HTML.

И вот мы идем, теперь, когда данные возвращаются, всплывающее окно получает новые данные. Кроме того, вы можете захотеть сохранить свои маркеры в контроллере, поэтому избегайте даже уродства с помощью map_service.

Вот fiddle

Позвольте мне знать, если у вас есть вопросы