CODEWITHSUNDEEP
angularjs
Jaime Mateo
Jaime Mateo

Reputation: 3

What is the best way to communicate two Angular components?

I'm currently working on an app built with Angular 1.x and I would like to know which is the best practice to communicate two different components which were originally working separately in another module of the app. One of them is a selector and the other one is a slider.

Basically, the selector is a directive with the functionality defined in link. The same for the slider. The idea is to update the slider with new items everytime I click one of the options (ng-click) in the selector.

This is the very first time I have to implement this communication concept in Angular and I don't know if it's better to work with an external service taking and storing the data from both components, use events or controllers within the directives. Any recommendation is welcome.

EDIT:

Here I show the piece of code of my selector directive. Basically what I do is to change the selection property once there is a ng-click (my toggle() funct) in link:

angular.module('ngExploratory')
 .directive('xplrSelector', (PATH, XplrBaseObject, IdentifierService, DataService) ->
templateUrl: "#{PATH}components/selector/selector.html"
restrict: 'E'
replace: true
transclude: true
scope:
  xplrId: '@'
  xplrJoin: '='
  headers: '='
  content: '='
  limit: '='
link: (scope, element, attrs) ->
  XplrBaseObject.extend scope, element, attrs
  scope.data = {} if not scope.data?
  scope.toggle = () ->
    scope.id = IdentifierService.initialize element
    scope.value = DataService.get scope.id
    scope.data.selected = !scope.data.selected
    scope.commit()
  return
)

Then, once this click/selection is done I want to run and initialize my slider component (the code for this is just too long...). All the functionality in the slider is again defined in link in the directive. There are no controllers then.

Upvotes: 0

Views: 118

Answers (1)

Fredrik Holm
Fredrik Holm

Reputation: 166

Personally, I prefer to use services for data (and potentially behavior) sharing. If possible I try to use the API of the service and use events as a last resort. But of course, every scenario is different... :-)

Upvotes: 1

Related Questions