2014-08-30 59 views
0

我試圖構建一個由全屏地圖和邊欄組成的Angular應用程序。我應該如何處理控制器之間的函數調用?

我目前有一個MapController來設置地圖,然後我有一個PlacesController來列出邊欄中的地點。如果我現在想通過點擊側邊欄中的鏈接將標記添加到地圖中,應如何處理?

我的想法: PlacesController有一個名爲addMarker的函數,它在使用「$ rootScope。$ broadcast('addMarker');」廣播「addMarker」的服務中調用另一個名爲addMarker的函數; MapController偵聽,然後在MapController中調用「addMarker」,它實際上將標記添加到地圖中。

有沒有更容易/更好的方法來做到這一點?

+2

移動的代碼,使用地圖的服務,並使用該服務在兩個控制器你的想法左右。非常糟糕。 – 2014-08-30 21:35:48

回答

2

您應該將某些服務中包含的數據全部包含在通知任何監聽者更改時的服務中。 編輯這裏是一個jsBin證明了該方法

觀察者模式將有利於這一個:

app.factory('MapService', function() { 
    var observerCallbacks = []; 
    var markers = []; 

    var publicMembers = { 
    addMarker: addMarker, 
    getMarkers: getMarkers, 
    registerObserverCallback: registerObserverCallback 
    } 

    function addMarker (marker) { 
    markers.push(marker); 
    notifyObservers(); 
    }; 

    function getMarkers() { 
    return markers; 
    } 

    function registerObserverCallback(callback){ 
    observerCallbacks.push(callback); 
    }; 

    function notifyObservers(){ 
    angular.forEach(observerCallbacks, function(callback){ 
     callback(); 
    }); 
    }; 

    return publicMembers; 
}); 

然後在你的控制器,你可以可以注入該服務,註冊成爲觀察員,任何時間觀察員通知(例如,在addMarker,您的回調將被執行:

app.controller('MyController', function($scope, MapService) { 
    MapService.registerObserverCallback(function() { 
     $scope.markers = MapService.getMarkers(); 
    }); 
}); 
相關問題