Связь с контроллером высокого напряжения в AngularJS

Я внедрил одностраничное приложение с AngularJS. Страница состоит из области содержимого в середине и разделов, собранных вокруг центра, которые показывают дополнительную информацию и предоставляют средства для управления центром.Связь с контроллером высокого напряжения в AngularJS

enter image description here

Каждая секция (называемая Side Info) и область содержимого есть контроллер отдельных AngularJS, возложенные на них. В настоящее время я общаюсь через $rootScope.$broadcast и $scope.$on(), например.

app.controller('PropertiesController', function ($scope, $rootScope) { 

    $scope.$on('somethingHappened', function(event, data){ 
     // react 
    }); 

});

Я тогда звоните общаться с другими контроллерами:

$rootScope.$broadcast('somethingHappened', data);

У меня есть довольно много общения происходит между контроллерами. Особенно, если что-то происходит в области содержимого, необходимо принять несколько элементов дополнительной информации. Другой путь также является частым: пользователь отправляет форму (расположенную в дополнительной информации), а область содержимого и другие элементы дополнительной информации должны принимать.

Мой вопрос: Есть ли лучший способ справиться SPA с тяжелой связи контроллера?

Код работает нормально, но он уже немного запутан (например, трудно найти, какие события обрабатываются там, где и т. Д.). Так как приложение, вероятно, будет расти в ближайшие недели, я бы хотел сделать эти изменения (если есть какие-либо лучшие решения) как можно скорее.

источник

2015-02-05 WeSt

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

Использование общей службы - это еще один способ общения. –

Часто вы можете размещать общие вещи в уровне страницы PagesController. Таким образом, вы можете легко получить доступ к ним через объем. Иногда вы можете добавить некоторую услугу, которая будет делиться переменными состояния. – dubadub

Вы можете использовать

$rootScope.$emit('some:event') ;

, потому что она идет вверх и rootscope исть верхний уровень

Используйте

var myListener = $rootScope.$on('some:event', function (event, data) { }); 
$scope.$on('$destroy', myListener);

поймать событие

Тогда у вас есть связь на на том же уровне корнеплод без пузырьков

Вот мой реализован сервис eventbus

http://jsfiddle.net/navqtaoj/2/

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

источник

2015-02-05 15:46:05 micha

У вас есть несколько вариантов, чтобы избежать Трансляции вызовов:

обмена данными между контроллерами с использованием услуг, как это было упомянуто в комментариях. Вы можете посмотреть, как это делается: https://thinkster.io/egghead/sharing-data-between-controllers
Создайте главный контроллер для всей страницы и дочерних контроллеров для каждого раздела (область содержимого и дополнительная информация). Использовать наследование прототипа области.Например:

если в главном контроллере у вас есть: $scope.myObject = someValue;

в дочерних контроллеров можно установить: $scope.myObject.myProperty = someOtherValue;

вы можете получить доступ к myObject.myProperty из своего главного контроллера

источник

2015-02-05 16:06:06 rave

для наследования областей важно не использовать переменные в области напрямую, лучше регистрировать переменные в объекте по области, чтобы у вас была точка в имени модели http://stackoverflow.com/questions/14049480/what-are-the -nuances-о-сфере-прототипный-прототипическая наследование-в-angularjs/14049482 # 14049482 – micha

Это действительно интересно. Паб/Sub должен быть правильным решением здесь.

Вы можете добавить дополнительный заказ в свой проект, используя Угловые услуги в качестве модели MVC и обновите эту модель для каждого изменения. Проблема здесь в том, что вы должны реализовать наблюдаемый шаблон внутри своей службы и зарегистрироваться для них, чтобы это было синхронизировано в реальном времени. Итак, мы вернулись в Pub/Sub (или другое решение Observable, о котором вы могли бы подумать ...).

Но проект будет лучше организован таким образом.

Например, SideInfo1Service будет сервисом/моделью. Каждое изменение свойства вызовет заметные изменения, которые изменят всех слушателей:

myApp.factory('SideInfo1Service', function($scope){ 
    var _prop1; 
    return { 
     setProp1: function(value){ 
      $scope.$broadcast('prop1Changed', value); 
      _prop1 = value;  
     }, 
     getProp1: function(){ 
      return _prop1; 
     } 
    } 
});

Вы могли бы найти те действительно интересные посты блога об использовании Радиально-службы в качестве модели MVC в:

http://toddmotto.com/rethinking-angular-js-controllers/

http://jonathancreamer.com/the-state-of-angularjs-controllers/

И это сообщение о наблюдаемом узоре в Angularjs:

https://stackoverflow.com/a/25613550/916450

Надеется, что это может быть полезным (:

источник

2015-02-06 19:07:36

Очень важный вопрос и очень хорошие ответы.

Я был вдохновлен и создал три plunks показывая каждую технику: