2013-07-28 86 views
1

我正在嘗試使用angularjs和傳單一起解決問題。但是這個普遍的問題困擾了我一段時間,所以解決方法是一個很好的導向,「我是否從一個角度來看是正確的?」Angularjs控制從指令到控制器的流程返回指令

問題:

我使用的是單張地圖,我想用它的彈出窗口來顯示我的地圖上的點的額外數據。我打算在地圖上顯示很多點。什麼是很多?足夠的是,當我查詢服務器的點時,我只抓取id(用於稍後查詢更多數據)和幾何圖形(以便我可以繪製點)。點擊「點擊」我想聯繫服務器以獲取與該特定點關聯的所有數據並將其顯示在彈出窗口中。

我有一個角度指令,控制與傳單(傳單指令)有關的DOM中的所有內容。該指令是監聽某個點上的「點擊」之類的內容。發生這種情況時,我的指令返回給控制器,然後控制器向服務器請求關於點的數據並填充範圍變量,以便HTML模板可以「填充」數據。

這裏有幾個問題: 1.指令是否應該回撥給控制器以獲取指令然後監聽的數據? 2.我該指令調用似乎是一個黑客,因爲我必須得到的範圍,如果在什麼感覺就像一個黑客攻擊了「剛編譯」元素:

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

上的問題。 Leaflet並沒有意識到在彈出窗口被渲染後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秒內顯示彈出窗口,這是一種可怕的用戶體驗。

我唯一剩下的就是試圖調整我自己的傳單彈出窗口,甚至不知道從哪裏開始或者如果這是一個好主意。

任何和所有的幫助和批評(與調整大小問題和角度使用)是受歡迎和讚賞。

在此先感謝。

回答

1

在我的解決方案中,我允許服務訪問地圖上的標記和另一個與後端通信的服務以獲取內容。

訪問標記的服務允許我爲彈出窗口添加指令並將其綁定到標記。彈出式指令可以具有由檢索到的數據填充的附加信息。

獲取服務的內容通過使用承諾起作用,後者在後端返回時與數據一起解析。我只是使用$超時,但您將使用$ http。

me.GetData = function() { 
    var def = $q.defer(); 
    $timeout(function() { 
     def.resolve('<span> wooo! </span>'); 
    }, 2000); 
    return def.promise; 
}; 

彈出式服務綁定到標記(如果需要,帶有一些默認元素)並等待內容。

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

現在我只是從超時返回HTML,但是有可能你會要麼使用承諾里面的內容或綁定返回數據的範圍,以更新HTML。

而現在我們走了,現在當數據返回時,彈出窗口獲取新數據。另外,您可能希望將標記保留在控制器中,以避免使用map_service的醜陋。

這裏是fiddle

讓我知道如果您有任何疑問