Модуль Angular ngAnimate нарушит директиву карты открытых слоев

Question

Я сделал директиву, которая отображает карту Open Layers (ниже не мой рабочий код, а упрощенная версия, используемая для создания plunkr. Не обращайте внимания на жестко закодированный идентификатор элемента DOM).

РЕДАКТИРОВАТЬ: жестко закодированный идентификатор был действительно проблемой, см. Комментарии ниже...

app.directive('tchOlMapCopy', function () {

    return {

        restrict: 'E',

        replace: true,
        template: '<div id="tchMap" class="full-height"></div>',

        link: function postLink(scope, element, attrs) {
            var map = new OpenLayers.Map("tchMap");
            map.addLayer(new OpenLayers.Layer.OSM());
            map.setCenter(new OpenLayers.LonLat(3, 47).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")), 5);
        }
    }

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

Я сузил проблему, связанную с модулем ngAnimate. Если я уберу зависимость от этого модуля, карта будет отображаться правильно при втором изменении маршрута.

Я сделал Plunkr, чтобы проиллюстрировать эту проблему. Прокомментируйте или раскомментируйте модуль ngAnimate в файле app.js, чтобы увидеть проблему.

У кого-нибудь есть идея, почему ngAnimate прерывает мой вызов директивы?

Answer 1

Наличие нескольких экземпляров этой директивы с жестким кодом id кажется очень плохой идеей. Должен быть уникальный идентификатор: http://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes