Как обращаться с вызовами функций между контроллерами?

Question

Я пытаюсь создать Угловое приложение, состоящее из полноэкранной карты и боковой панели.

В настоящее время у меня есть MapController, который настраивает карту, а затем у меня есть PlacesController для размещения мест на боковой панели. Если теперь я хотел бы добавить маркер к карте, щелкнув ссылку на боковой панели, как это следует обрабатывать?

Моя идея: Функция PlacesController имеет функцию addMarker, которая вызывает другую функцию addMarker в службе, которая передает «addMarker», используя «$ rootScope». $ Broadcast ('addMarker'); который MapController прослушивает, а затем вызывает «addMarker» в MapController, который фактически добавляет маркер к карте.

Есть ли более простой/лучший способ сделать это?

Answer 1

Вы должны иметь все данные, содержащиеся в какой-либо службе, которая уведомляет слушателей о том, когда они были изменены. Редактировать Вот 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(); 
    }); 
});