javascript - Sibling directive/controller related lists (and master/detail) in Angular -

javascript - Sibling directive/controller related lists (and master/detail) in Angular -

i have approximately 4 main pairs of related directives, simultaneously displayed in angularjs ui. speaking, each pair includes parent list directive on top associated detail editor directive beneath it, shown in diagram:

each right-hand list has many-to-one relationship active left-hand selection, , related info must displayed. how should drive related list (the left-to-right association) refreshes?

currently, each master-detail directive-pair, or "stack", share service. service holds itemstate.active (active detail record) , itemstate.headers (query master results list). activity in either master or detail panel phone call service, straight impact service state. then, master/detail association operated via simple declarative angular watches on mutual positionservice.state; no controller code required. expect using service single point of truth here create easy me integrate near-realtime display in future, illustration via signalr. master-detail implementation provided here background, although welcome improvements:

master directive, e.g. position-list.js

templateurl: "position/position-list.html", controller: ['$scope', 'positionsvc', function ($scope, positionservice) { $scope.positions = positionservice.itemstate(); $scope.select = function (position) { positionservice.read(position.id) }; }

master template, e.g. position-list.html

<li ng-repeat="i in itemstate.headers" ng-click="select(i)">{{i.title}}</li>

service, e.g. position-svc.js

this.itemstate = { headers: [], active: { id: 0 }, pending: httpsvc.pending }; this.create = function (detail) { httpsvc.remote("post", detail).then(function (header) { itemstate.headers.unshift(header); read(detail.id); }); } this.read = function (id) { httpsvc.remote("get", id).then(function (detail) { itemstate.active = detail; }); }

a similar directive , template exists detail. shares same service. idea.

now i'm looking maintainable way handle left->right eventing next design practices , well-known angularjs patterns. i'd retain composability of directives.

to demonstrate i'm not looking work me (and organize own thoughts), here approaches came with, although none have seemed right far. i'm continuing document these, check if need section cleaned-up. grouped message path:

leftcontroller -> mainapp -> rightcontroller part a: leftcontroller -> mainapp mainapp.$scope.onleftitemselected (e.g. via { scope: '&' }) leftcontroller.$scope.$emit within leftcontroller.watch leftcontroller.$parent.onleftitemselected (e.g. angularjs access parent scope kid controller, incorrectly creates bottom-up dependency) part b: mainapp -> rightcontroller mainapp.$scope.$broadcast mainapp.rightservice.load(leftitemid) leftcontroller -> mainapp model -> rightcontroller.$watch share parent scope variable between leftcontroller , rightcontroller transmit isolated scope leftcontroller mainapp using { scope: '=' }; jesús quintana's solution, below, , here: http://plnkr.co/edit/tyzpzit9vowdfqhdf8a5?p=preview leftcontroller -> $route -> rightcontroller implementing ideal, allowing me provide deep-linking/bookmarking single-page-application, requires enabling page load parent hierarchy when kid selected, rather converse (loading kid records of selected parent item). requires greater initial investment can justify. http://embed.plnkr.co/dbsbiv/preview leftservice -> rightservice inject nominationservice sibling positionservice. phone call nominationservice.load(positionid) when setting positionservice.activerecord. pro: working. con: it's wrong. sibling dependency makes parent list unreusable. add custom pub/sub service (http://stackoverflow.com/questions/16235689#16235822, http://jsfiddle.net/thomasburleson/sv7d5/) leftservice -> $rootscope.broadcast -> rightservice not ideal, assuming our event string unique in root namespace (but performance issues have been addressed, discussed here http://stackoverflow.com/questions/11252780#19498009 ) leftservice -> mainapp -> rightservice inject positionservice , nominationservice mainapp. add together simple event list positionservice transmit notification upwards. pro: retains leftservice's role single point of truth active record throughout application (as noted martin cortez, in comments below) leftservice -> $rootscope.$route -> rightcontroller -> rightservice see notes approach 3

references angularjs: pass info between controllers how communicate between controllers while not using sharedservice between them?

based on angular pattern design best way both directive bind scope '=' (two way binding), , within directives create $scope.#watch observe changes of element binding , execute action function given variable.

is more clean way communicate within both directives, angular observe alter , spread out bot directives.

sorry , if reply useless question not explain .

javascript angularjs angularjs-directive angularjs-scope