Является ли это хорошим способом синхронизации данных между двумя контроллерами?

Question

У меня есть макет страницы с двумя контроллерами одновременно, один хранит данные, отображаемые как вид боковой навигации, на основе данных, хранящихся в локальном хранилище браузеров, и по меньшей мере одного другого контроллера, который привязан к маршруту и ​​виду ,

Я создал этот маленький графический провод кадра ниже которого показывает макет страницы:

Второй контроллер используется для манипулирования локальных хранимых данных, и выполняет действия, такие как добавление нового элемента или удаление существующего один. Моя цель - синхронизировать данные, если элемент «ManageListCrtl» добавлен или удален, боковая навигация с помощью «ListCtrl» должна немедленно обновиться.

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

Это прекрасно работает, но я не уверен, что есть лучшая практика.

Вот урезанная версия моего кода, содержащий только необходимые части:

angular.module('StoredListExample', ['LocalObjectStorage']) 
    .service('StoredList', function ($rootScope, LocalObjectStorage) { 
     this.add = function (url, title) { 
      // local storage add logic 

      $rootScope.$broadcast('StoredList', list); 
     }; 

     this.delete = function (id) { 
      // local storage delete logic 

      $rootScope.$broadcast('StoredList', list); 
     }; 

     this.get = function() { 
      // local storage get logic 
     }; 
    }); 

angular.module('StoredListExample') 
    .controller('ListCtrl', function ($scope, StoredList) { 
     $scope.list = StoredList.get(); 

     $scope.$on('StoredList', function (event, data) { 
      $scope.list = data; 
     }); 
    }); 

angular.module('StoredListExample') 
    .controller('ManageListCtrl', function ($scope, $location, StoredList) { 
     $scope.list = StoredList.get(); 

     $scope.add = function() { 
      StoredList.add($scope.url, $scope.title); 
      $location.path('/manage'); 
     }; 

     $scope.delete = function (id) { 
      StoredList.delete(id); 
     }; 

     $scope.$on('StoredList', function (event, data) { 
      $scope.list = data; 
     }); 
    }); 

Answer 1

Я не вижу ничего плохого делать это таким образом. Разумеется, ваш другой вариант - просто ввести $ rootScope в оба контроллера и pub/sub между ними с помощью $ rootScope. $ Broadcast и $ rootScope. $ On.

angular.module('StoredListExample') 
.controller('ListCtrl', function ($scope, $rootScope) { 
    $scope.list = []; 

    $rootScope.$on('StoredList', function (event, data) { 
     $scope.list = data; 
    }); 
}); 

angular.module('StoredListExample') 
.controller('ManageListCtrl', function ($scope, $rootScope, $location) { 
    $scope.list = []; 

    $scope.add = function() { 
     //psuedo, not sure if this is what you'd be doing... 
     $scope.list.push({ url: $scope.url, title: $scope.title}); 
     $scope.storedListUpdated(); 
     $location.path('/manage'); 
    }; 

    $scope.delete = function (id) { 
     var index = $scope.list.indexOf(id); 
     $scope.list.splice(index, 1); 
     $scope.storedListUpdated(); 
    }; 

    $scope.storedListUpdated = function() { 
     $rootScope.$broadcast('StoredList', $scope.list); 
    }; 
}); 

Кроме того, вы можете достичь этого беспорядочным, но увлекательным способом, имея общий родительский контроллер. В результате вы будете генерировать событие «StoredListUpdated» из «ManageListCtrl» в родительский контроллер, тогда родительский контроллер будет транслировать одно и то же событие до «ListCtrl». Это позволит вам избежать использования $ rootScope, но с точки зрения удобочитаемости он станет довольно грязным, так как вы добавите больше событий таким образом.

Answer 2

Всегда лучше использовать общую службу, которая является одноэлементной для обмена данными между двумя контроллерами - просто убедитесь, что вы используете только ссылки и не создаете локальный объект в одном из контроллеров, который должен быть фактически в службе