2014-09-19 1 views
1

Open Layers 맵을 표시하는 지시문을 만들었습니다 (아래는 제작 코드가 아니지만 plunkr을 만드는 데 사용 된 단순화 된 버전입니다.) 하드 코딩 된 DOM 요소 ID).Angular ngAnimate 모듈이 열린 레이어 맵 지시문을 깨뜨릴 것입니다.

편집 : 하드 코딩 된 ID는, 내가 그 문제를 가지고

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 모듈과 관련된 문제를 좁혔습니다. 이 모듈에 대한 종속성을 제거하면지도가 두 번째 경로 변경시 올바르게 표시됩니다.

I've made a Plunkr이이 문제를 설명합니다. 문제를 보려면 app.js 파일에서 ngAnimate 모듈의 주석을 달거나 주석 처리를 제거하십시오.

ngAnimate가 내 지시문을 깨뜨리는 이유는 누구나 알 수 있습니까?

+1

먼저,이 지시문을 여러 번 사용하여 하드 코딩 된 'id' *가있는 인스턴스는 매우 나쁜 생각입니다. * 고유 한 식별자 * : https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#id – tonio

+0

내 "실제"코드가 아니며, 방금 지시문을 복사하고이를 단순화했습니다. plunkr에서 작동합니다. 위에 plunkr에서 붙여 넣기입니다. 다른 사람들이 실수하지 않도록 메모를 추가하겠습니다. 감사합니다. – Mat

+0

호 호, 하드 코딩 된 ID는 실제로 문제가되었습니다. 내 나쁜 ... SPA의 흔한 함정에 익숙하지 않은 것 같습니다 ^^. 바보 야. 바운티는 당신이 아래의 답을 주면 당신의 것이지요, 그래서 나는 그것을 인정 된 것으로 표시 할 수 있습니다. – Mat

답변

관련 문제