2014-09-19 44 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 2014-09-22 11:50:53

+0

這不是我的「真實」代碼,我只是複製了我的指令並簡化了它它在plunkr中工作。以上是來自plunkr的粘貼。我會添加一個便條,讓其他人不會誤解,謝謝。 – Mat 2014-09-22 14:12:30

+0

何浩,硬編碼的ID確實是問題,我的壞...似乎我不習慣SPA的一些常見陷阱,但^^。愚蠢的我。如果您在下面提供答案,賞金是您的,因此我可以將其標記爲已接受。 – Mat 2014-09-22 15:09:33

回答